[jQuery] [PLUGIN] editInPlace with checkboxes and selectBoxes

[Yehuda Katz]

I will document this later, but suffice it to say that you can call the editInPlace function with an AJAX callback for successful saves (say, to update the page after a save is completed),  a typeOfBox (which can be "text", "checkbox", or "select" but defaults to "text"), as well as a dataUrl, which provides:

• blank or 'checked="checked"' for checkboxes
• a <select> list containing a list of options for select lists

You can provide all sorts of params in the dataUrl, so you could pass in the ID of the record in the database, etc. The only constraint is that the server must return an html fragment matching the appropriate type or wonkiness will ensue. Make sure that the server returns an appropriate response on save, because that response will be used to update the editInPlace box.

There's a quick animation (fade to half, fade in to 100%) that takes under a second to complete to indicate success.

The code follows:

---

var typeList = {};

jQuery.fn.editInPlace = function(url, ajaxCallback, typeOfBox, dataUrl) {
    this.each(function() { typeList[this.id] = typeOfBox || "text"; })
    var data;
    if(dataUrl)
        $.ajax({url: dataUrl, success: function(res) { data = "" } });
    editInPlaceClick = function() {
        type = typeList[ this.id] || "text";
        buttons = "<p class=\"buttons\"><input type=\"button\" value=\"SAVE\" class=\"saveButton\" />" +
            " or <input type=\"button\" value=\"CANCEL\" class=\"cancelButton\" /></p>";
        if(type == "text")
            var ta = "<p><input type=\"text\" value = \"" + this.innerHTML + "\" /></p>" + buttons;
        if(type == "checkbox")
            var ta = "<p><input class=\"checkbox\" type=\"checkbox\" " + data + " /></p>" + buttons;
        if(type == "select")
            var ta = data + buttons;
        var revert = this.innerHTML;
        this.innerHTML = ta;
        $(this).removeClickable();
        var self = this;
        $(".saveButton").click(function(e){
            editable = this.parentNode.parentNode;   
            if(type == "text")
                value = $(editable).find("[EMAIL PROTECTED]'" + type + "']").val();
            else if(type == "checkbox")
                value = $(editable).find("[EMAIL PROTECTED]'" + type + "']")[0].checked;           
            else if(type == "select")
                value = $(editable).find("select").val();
            $.ajax({
                url: url,
                type: "POST",
                data: "value=" + value + "&id=" + editable.id,
                complete: function(response) {
                    $(editable).empty().html(response.responseText);
                    $(editable).addBackClickable(type);
                    $(editable).animate({opacity: .5}, "normal", function() {$(editable).animate({opacity: 1}, "normal")});
                    if(ajaxCallback && ajaxCallback.constructor == Function) {
                        ajaxCallback(editable, response);
                    }
                    $("script", self).each(function(){
                        eval( this.text || this.textContent || this.innerHTML || "");
                    }).remove();                   
                }
           })
            e.stopPropagation();           
        });
        $(".cancelButton").click(function(e){
            editable = this.parentNode.parentNode;                                                                               
            $(editable).addBackClickable(type); editable.innerHTML = revert; 
            e.stopPropagation();
        });
    }

    var clickFunction = editInPlaceClick;

    jQuery.fn.removeClickable = function() {
        this.removeClass("editableInPlace").removeClass("editable");
        this.unclick();       
        this.unmouseover().unmouseout();
    }
   
    jQuery.fn.addBackClickable = function(editType) {
        this.editInPlace(url, ajaxCallback, editType, dataUrl);       
    }
   
    return this.click(clickFunction)
    .hover(function() {
        $(this).addClass("editableInPlace");                                   
    }, function() {
        $(this).removeClass("editableInPlace");
    });   
}

--
Yehuda Katz
Web Developer
(ph)  718.877.1325
(fax) 718.686.4288

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/