[jQuery] [PLUGIN] editInPlace
The following plugin allows you to do $(expression).editInPlace(url). It borrows some concepts from Day 10 of 15 Days of jQuery, but pluginises the whole thing, allows you to pass a URL, replaces the contents of the editables, rather than the editables themselves (preserving attributes), and is, in a lot of places, an entirely different approach. Additionally, the plugin automatically passes the value of the textarea, as well as the id of the item passed to editInPlace in the AJAX call as "value" and "id" respectively.
This plugin automatically adds the class "editableInPlace" to elements when hovered over, and removes it when the hovering goes away. It also removes the clickability and hovering effects when in editing mode. I'll probably give this another polish before releasing it, but I wanted to get some feedback first.
As always, I'd like to thank John for putting up with my incessant questions.
<span style="font-family: courier new,monospace;">/**
* jQuery Edit in Place Plugin
*
* syntax $(expression).editInPlace(url for ajax)
* Note: the plugin automatically passes the value of the textarea, as well as the id of the element
* in the AJAX call as "value" and "id" respectively.
*/
jQuery.fn.editInPlace = function(url) {
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> editInPlaceClick = function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
var textarea = '<textarea id="ta" rows="4" cols="60">'+$(this).html()+'</textarea>
';</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
var button = '<input type="button" value="SAVE" class="saveButton" />' +</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
'OR <input type="button" value="CANCEL" class="cancelButton" />';</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var revert =
this.innerHTML;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> this.innerHTML = textarea + button;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$(this).removeClickable();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(".saveButton").click(function(){</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> $(this.parentNode).load(url, { value: $(this.parentNode).find("textarea").val(),
id: <a href="http://this.parentNode.id">this.parentNode.id
</a> }, function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).animate({opacity: .5}, "normal", function() {$(this).animate({opacity: 1}, "normal")});
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).addBackClickable();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
});</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> });</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$(".cancelButton").click(function(){ $(this.parentNode).addBackClickable(); this.parentNode.innerHTML = revert; });</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
jQuery.fn.removeClickable = function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> this.removeClass("editableInPlace");</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> this.unclick(clickFunction); </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> this.unmouseover
().unmouseout();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> jQuery.fn.addBackClickable = function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
this.editInPlace(url); </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var clickFunction = editInPlaceClick;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
return this.click(clickFunction)</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .hover(function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$(this).addClass("editableInPlace"); </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }, function() {</span>
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).removeClass("editableInPlace");</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}); </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">}</span><br clear="all">
--
Yehuda Katz
Web Developer
(ph) 718.877.1325
(fax) 718.686.4288
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/