- blank or 'checked="checked"' for checkboxes
- a <select> list containing a list of options for select lists
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/