Use jQuery UI buttons with jEditables

The question is, how do I make the buttons within jEditable elements jQuery UI buttons? Ideally, I want to call $(':button').button() after the jEditabl开发者_运维技巧e form elements are loaded. Looking at the code, the 4 undocumented callback functions: onedit, onsubmit, onreset, onerror don't seem to be calling back at the right time.

Any idea how I can achieve this?

EDIT:

Here's the example code: http://jsfiddle.net/EU8ce/1/

I'd like the buttons in the editable element to be jQuery UI buttons.

From a brief look at the jEditable source (I'm not really familiar with the plugin), the only hook (callback) that is useful in this case is the onedit which is called before the form is rendered. The plugin should really support onbeforeedit and onafteredit or something, for pre and post rendering. But it doesn't.

So you can add that functionality really easily. Or workaround it with a simple click handler:

http://jsfiddle.net/EU8ce/3/

Since you call editable() first, it'll bind the click handler first, so subsequent handlers will execute after, which has the effect of being a post-render callback, and you can execute your button() code there.

this might not be the cleanest thing in the world but it work: i created a custom type (which mirrors the standard type but calls button() on the buttons

$.editable.addInputType('example',{
    element : function(settings, original) {
                    var input = $('<input />');
                    if (settings.width  != 'none') { input.width(settings.width);  }
                    if (settings.height != 'none') { input.height(settings.height); }
                       input.attr('autocomplete','off');
                    $(this).append(input);
                    return(input);
                },

     buttons : function(settings, original) {
                    var form = this;
                    if (settings.submit) {
                        /* if given html string use that */
                        if (settings.submit.match(/>$/)) {
                            var submit = $(settings.submit).click(function() {
                                if (submit.attr("type") != "submit") {
                                    form.submit();
                                }
                            });
                        /* otherwise use button with given string as text */
                        } else {
                            var submit = $('<button type="submit" />').button();
                            submit.html(settings.submit);                            
                        }
                        $(this).append(submit);
                    }
                    if (settings.cancel) {
                        /* if given html string use that */
                        if (settings.cancel.match(/>$/)) {
                            var cancel = $(settings.cancel);
                        /* otherwise use button with given string as text */
                        } else {
                            var cancel = $('<button type="cancel" />').button();
                            cancel.html(settings.cancel);
                        }
                        $(this).append(cancel);

                        $(cancel).click(function(event) {
                            //original.reset();
                            if ($.isFunction($.editable.types[settings.type].reset)) {
                                var reset = $.editable.types[settings.type].reset;                                                                
                            } else {
                                var reset = $.editable.types['defaults'].reset;                                
                            }
                            reset.apply(form, [settings, original]);
                            return false;
                        });
                    }
                }

});
$("#edit").editable("someurl", {
    type: "example",
    submit: "OK",
    cancel: "Cancel"
});


$('#button').button();

fiddle here: http://jsfiddle.net/EU8ce/4/