Question

The question is, how do I make the buttons within jEditable elements jQuery UI buttons? Ideally, I want to call $(':button').button() after the jEditable 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.

Answer 1

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.