Can I use the onblur event with Jeditable and JQuery UI?

Question

I am using jQuery UI-sortable interaction and Jeditable . The idea is that the user can change the order of the elements and influence the contents of these elements. I got confused that the onblur event , which I have a Jeditable setup for listening to, is swallowed by a sorted jQuery listener.

The user can click on the Jeditable element and this element will become editable, but when they click, if they click on li , which is sorted, the onblur event is ignored. An event is not ignored if they go beyond li . How can I make Jeditable know about the blur event when they click inside li ?

Here's jsFiddle illustrating the problem

HTML markup

 <ul class="elementlist"> <li id="elementSk_10"> <span class="editable-element" id="10">TEXT!</span> </li> <li id="elementSk_33"> <span class="editable-element" id="33">Some text</span> </li> </ul> 

Jeditable

 $('.editable-element').editable('http://jsfiddle.net/echo/jsonp/', { onblur: 'submit', width: 250, indicator: 'Saving...' }); 

jQuery UI Sortable

 $(".elementlist").sortable({ update: function(event, ui) { var elementSerialized = $(this).sortable('serialize'); $.post('http://jsfiddle.net/echo/jsonp/', { elementSk: $(this).sortable('serialize') }); } });​ 

---

Edit : In an attempt to clarify what is happening, let me give a step-by-step guide and screenshots.

• Click Some Text
• Press li containing TEXT!
• Release the TEXT! button TEXT!

At this moment, I did not reorder anything. Clicking on li and releasing did not onblur for Jeditable. I would like a simple click act to trigger onblur. If I do not collect the sort, this is how it works. I have to believe that clicking on li swallowed by sorting.

---

Here is another example with reordering, but not yet onblur .

• Click Some Text
• Press li containing TEXT!
• Move TEXT! below Some Text
• Release the TEXT! button TEXT!

After reordering the elements and freeing the li containing TEXT! , onblur not fixed. Elements are in a new order, but Some Text is still in an editable state.

Everything said here is what I expect:
Clicking on anything outside the editable field should trigger onblur Jeditable. What exactly happens if jQuery collation is not connected. When jQuery sortable is connected to trigger the onblur behavior, I have to click outside the sorted list items.

Answer 1

Imprinted in Jeditable source code to modify it. In reading, I came across some undocumented event hooks that did their best:

 var onedit = settings.onedit || function() { }; var onsubmit = settings.onsubmit || function() { }; var onreset = settings.onreset || function() { }; 

Using them, I can disable and then enable sorting again:

 var disableSortable = function(settings, self) { $(".elementlist").sortable('disable'); }; var enableSortable = function(settings, self) { $(".elementlist").sortable('enable'); }; $('.editable-element').editable('http://jsfiddle.net/echo/jsonp/', { onblur: 'submit', width: 250, indicator: 'Saving...', onedit: disableSortable, onsubmit: enableSortable, onreset: enableSortable }); $(".elementlist").sortable({ update: function(event, ui) { var elementSerialized = $(this).sortable('serialize'); $.post('http://jsfiddle.net/echo/jsonp/', { elementSk: $(this).sortable('serialize') }); } });​ 

I need to reuse both reset and send for cases when the user presses ESC ; which discards the form, but does not transmit it. Here's a jsFiddle showing a working implementation for disabling sorts, and then reusing .

I do not like this solution, but so far it's good enough. I would prefer onblur not to swallow the jQuery user interface. To fix this, you need a lot more code than I like right now.

Answer 2

This should not be the final answer, and I am not going to shoot the “accepted” here ... too much text for comment.

I really believe that you are right in your first assumption - the event will swallow. If you look at the sortable API, you will see that it expands after onblur , dividing events into a series of more granular events that can have their own callbacks. I would not be surprised at all if I dig into this code, it shows that the source event cannot be preventDefault something as simple as preventDefault or returnFalse in a sortable native event handler.

Or maybe when you drag a sorted item, you drag a clone of some kind, a visual copy of the LI that does not carry any real event handlers. It's just a thought ... again, the comment space is too limited.

I can't seem to load the fiddle right now, so I can't fool and prove any concepts, but I wonder if you can directly intervene with sortable handlers to intentionally blur the element? Or better yet, find out which jEditable function is triggered when blurring and bypassing blurriness to run this function at the end of the sort function.