Inline edit using the jQuery/Php

Hi,
 here code for you,that did not need the any plug-in
  Just copy pest the code and add class to element so the it can peek up
  class name "editable"
 and also give id to the each div or span like "Aesop"
 so that u can fetch the id of the element

function($) {

    $.fn.inlineEdit = function(options) {
        
               options = $.extend({
            hover: 'hover',
            value: '',
            save: '',
            buttonText: 'Save',
            placeholder: 'Click to edit'
        }, options);

        return $.each(this, function() {
            $.inlineEdit(this, options);
        });
    }

    $.inlineEdit = function(obj, options) {
         
           var self = $(obj),
            placeholderHtml = ''+ options.placeholder +'';
         
        self.value = function(newValue) {
            if (arguments.length) {
                self.data('value', $(newValue).hasClass('inlineEdit-placeholder') ? '' : newValue);
            }
            return self.data('value');
        }
       self.value($.trim(self.text()) || options.value);

        self.bind('click', function(event) {
           
            var $this = $(event.target);
            
            if ($this.is('button')) {
                 var hash = {
                        value: $input = $this.siblings('input').val(),
                       //add more values here
                        id :$this.siblings('input').attr('id')
                          };
                
              if (($.isFunction(options.save) && options.save.call(self, event, hash)) !== false || !options.save) {
                    self.value(hash.value);
                   //self is the element which is click
                   //if you want add other var then add here
                    self.id = hash.id ;
                 }
               
            } else if ($this.is(self[0].tagName) || $this.hasClass('inlineEdit-placeholder')) {
                self
                    .html(' ')
                    .find('input')
                        .bind('blur', function() {
                            if (self.timer) {
                                window.clearTimeout(self.timer);
                            }
                            self.timer = window.setTimeout(function() {
                                self.html(self.value() || placeholderHtml);
                                self.removeClass(options.hover);
                            }, 200);
                        })
                        .focus();
            }
        })
        .hover(
            function(){
                $(this).addClass(options.hover);
            },
            function(){
                $(this).removeClass(options.hover);
            }
        );

        if (!self.value()) {
            self.html($(placeholderHtml));
        } else if (options.value) {
            self.html(options.value);
        }
    }

})(jQuery);






jQuery(function(){
             
             jQuery('.editable').inlineEdit({
                buttonText : 'Save',
               save: function(e,data) {
                //alert(data.id);
                var parent_id = jQuery('#cat').val();
                  e.preventDefault();
                 //return confirm('You are about to change your name to "'+ data.value +'"\n\nAre you sure?'); 
                //this is ajax call
                    jQuery.ajax({
                       type: "GET",
                       url: ''+data.id+'&name='+data.value+'&parent_id='+parent_id,
                       success: function(res)
                     {
                       
                       if(res == 0)
                        {
                          alert('Category name already exists,please use another name');
                          jQuery('#'+data.id).html('Edit Category');
                         }
                     }
                   });//ajax end
                }//save callback function end
            });//inline edit function end
        });//jquery function end

Have Dream Day