[jQuery] small Changes to editable (Dan's)
Hi Dan,
i made some minor changes to your awesome editable script.
What i tried to do was using it in conjunction with cake.
Imagine a list like so
<table>
<tr>
<td class=editable name='data[User][title]'>
Junior
</td>
<td class=editable name='data[User][phone]'>
349234
</td>
</tr>
</table>
The changes i made make it possible to have multiple parameters
depending on a name attribute in the dom element. The input element
you insert gets the name attribute when i click on the td. You can
still set a fixed paramName but by default it now takes the name
attribute of the element. (When paramName=null)
Have a look:
/* jQuery editable Copyright Dylan Verheul <dylan@dyve.net>
* Licensed like jQuery, see http://docs.jquery.com/License
*/
$.fn.editable = function(url, options) {
// Options
options = arrayMerge({
"url": url,
"paramName": null,
"callback": null,
"saving": "saving ...",
"type": "text",
"submitButton": 0,
"delayOnBlur": 0,
"extraParams": {},
"editClass": null
}, options);
// Set up
this.click(function(e) {
if (this.editing) return;
if (!this.editable) this.editable = function() {
var me = this;
me.editing = true;
me.orgHTML = $(me).html();
me.innerHTML = "";
if (options.editClass) $(me).addClass(options.editClass);
var f = document.createElement("form");
var i = createInputElement(me);
var t = 0;
f.appendChild(i);
if (options.submitButton) {
var b = document.createElement("input");
b.type = "submit";
b.value = "OK";
f.appendChild(b);
}
me.appendChild(f);
i.focus();
$(i).blur(
options.delayOnBlur ? function() { t = setTimeout(reset,
options.delayOnBlur) } : reset
)
.keydown(function(e) {
if (e.keyCode == 27) { // ESC
e.preventDefault;
reset
}
});
$(f).submit(function(e) {
if (t) clearTimeout(t);
e.preventDefault();
var p = {};
p[i.name] = $(i).val();
// CHANGE MADE HERE
$
(me).html(options.saving).load(options.url,jQuery.extend(p,options.extraParams),
function() {
// Remove script tags
me.innerHTML = me.innerHTML.replace(/<\s*script\s*.*>.*<\/
\s*script\s*.*>/gi, "");
// Callback if necessary
if (options.callback) options.callback(me);
// Release
me.editing = false;
});
});
function reset() {
me.innerHTML = me.orgHTML;
if (options.editClass) $(me).removeClass(options.editClass);
me.editing = false;
}
};
this.editable();
})
;
// Don't break the chain
return this;
// Helper functions
function arrayMerge(a, b) {
if (a) {
if (b) for(var i in b) a[i] = b[i];
return a;
} else {
return b;
}
};
// CHANGE MADE HERE
function createInputElement(me) {
if (options.type == "textarea") {
var i = document.createElement("textarea");
options.submitButton = true;
options.delayOnBlur = 100; // delay onBlur so we can click the
button
} else {
var i = document.createElement("input");
i.type = "text";
}
$(i).val(me.orgHTML);
i.name = options.paramName ? options.paramName : $(me).attr('name');
return i;
}
};
I pass the whole me object to the createInputElement function to get
the name attribute.
Please tell me what you think.
Cheers
Phil