[jQuery] small Changes to editable (Dan's)

[floepi]

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 <[EMAIL PROTECTED]>
 * 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