Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can the onblur event be used with Jeditable and jQuery UI sortable?

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.

  1. Click Some Text
  2. Click on li containing TEXT!
  3. Release click on TEXT!

screenshot of clicking on Some Textscreenshot of clicking on li 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.

  1. Click Some Text
  2. Click on li containing TEXT!
  3. Move TEXT! below Some Text
  4. Release hold on TEXT!

screenshot of clicking on Some Textscreenshot of clicking on li TEXT!screenshot of release of li containing 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.

like image 893
ahsteele Avatar asked Oct 08 '22 11:10

ahsteele


1 Answers

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.

like image 186
ahsteele Avatar answered Oct 12 '22 12:10

ahsteele