[jQuery] [PLUGIN] editInPlace with checkboxes and selectBoxes

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:
<ul><li>blank or 'checked="checked"' for checkboxes</li><li>a <select> list containing a list of options for select lists</li></ul>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[<a href="http://this.id">this.id</a>] = typeOfBox || "text"; })
 var data; if(dataUrl)
 $.ajax({url: dataUrl, success: function(res) { data = res.responseText } }); 
 editInPlaceClick = function() { type = typeList[<a href="http://this.id">
this.id</a>] || "text"; buttons = "<input type=\"button\" value=\"SAVE\" class=\"saveButton\" />" +
 " or <input type=\"button\" value=\"CANCEL\" class=\"cancelButton\" />";
 if(type == "text") 
 var ta = "

" + buttons; 
if(type == "checkbox") var ta = "

" + 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("input[@type='" + type + "']").val();
 else if(type == "checkbox") 
 value = $(editable).find("input[@type='" + type + "']")[0].checked; else if(type == "select")
 value = $(editable).find("select").val(); 
 $.ajax({ url: url, 
 type: "POST", data: "value=" + value + "&id=" +
<a href="http://editable.id">editable.id</a>, 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/

Topic Participants
wycats

[jQuery] [PLUGIN] editInPlace with checkboxes and selectBoxes

[jQuery] [PLUGIN] editInPlace with checkboxes and selectBoxes

Topic Participants

wycats