I am making use of the jQuery UI sortable interaction and Jeditable. The idea being that a user can reorder elements and affect the content of those elements. What I am running into is that the onblur event
that I have Jeditable setup to listen for is being swallowed by the jQuery sortable listener.
A user can click on a Jeditable element and that element becomes editable, but when they click away if they click on an li
that is sortable the onblur event is ignored. The event is not ignored if they click outside the li
. How can I make Jeditable aware of the blur event when they click inside an li
?
Here's a 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's going on let me give a step by step walkthrough accompanied by screenshots.
Some Text
li
containing TEXT!
TEXT!
At this point I haven't reordered anything. Clicking on the li
and releasing hasn't triggered the onblur
for Jeditable. I would like the simple act of clicking away to trigger the onblur. If I do not wire up sortable this is how it works. I have to believe somehow the click on the li
is being swallowed by sortable.
Here's another example with reordering but still no onblur
.
Some Text
li
containing TEXT!
TEXT!
below Some Text
TEXT!
After reordering the elements and releasing the li
containing TEXT!
the onblur
isn't captured. The elements are in a new order but the Some Text
is still in an editable state.
All of that said here is what I would expect to happen:
Clicking on anything outside of a field currently being edited should cause the onblur
of Jeditable to fire. Which is exactly what happens if jQuery sortable isn't wired up. When jQuery sortable is wired up to cause the onblur
behavior I have to click outside of the sortable list elements.
Dug into Jeditable source code with the intention of modifying it. In reading came across some undocumented event hooks which made all the difference:
var onedit = settings.onedit || function() { };
var onsubmit = settings.onsubmit || function() { };
var onreset = settings.onreset || function() { };
Making use of these I am able to disable and then reenable the sortable:
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 have to reenable on both reset and submit for cases when the user presses ESC; which resets the form rather than submitting it. Here's a jsFiddle showing a working implementation of disabling the sortables and then reenabling them.
I don't love this solution, but it's good enough for now. I'd prefer to not have the onblur
get swallowed by the jQuery UI sortable. To fix that though will require a lot more code spelunking than I feel like doing right now.