11

According to this jsbin i have a sortable list and a button . when click on button something add to sortable and i want to know which event of sortable is fired?(update,receive) and when finding the event do something on that event.

for example if user click on add button i want to know which event is fired and doing something on event . for example if update fire i do some thing in update method of sortable

$('.sort').sortable({
 update:function(){
//if update fire do some thing
}
});
  $('#add').click(function(){
  $('.sort').append('<li>Text</li>');
});
2

2 Answers 2

23

The Problem

When you define the update callback as part of the sortable widget options, an event called sortupdate is not bound to the widget. In other words, the callback function defined by the update option is indeed called, but an event by that name is not triggered in this situation.

The solution

If you wish to trigger the event manually, you also need to bind it manually. Note the event will also be triggered automatically by the widget's regular behavior (e.g. a user sorting the elements in the widget).

For example:

HTML

<ul class="sort"></ul>
<button id="add">Add</button>

JS

 // Instantiate the widget
$('.sort').sortable();

 // Bind the update event manually
$('.sort').on('sortupdate',function() {console.log('update')});

$('#add').click(function(){
    $('.sort').trigger('sortupdate'); // Trigger the update event manually
});

See JS Bin Demo

1
  • 4
    @flu answer's below is the better of the two, as it utilizes the official API directly.
    – Boaz
    Commented Jul 11, 2014 at 12:37
17

Use the option method from the sortable (to retrieve its callbacks)

As the update callback is defined as an option of the sortable widget it can be retrieved as such by calling the option method:

$('.sort').sortable('option', 'update');

The update callback expects two parameters, the event and a ui object. The event can be set to null and the ui object needs to be defined with all the properties your update callback expects:

$('#add').click(function() {
    $('.sort').sortable('option','update')(null, {
        item: $('<li>new item</li>').appendTo($('.sort'))
    });
});

Working JS-Fiddle

1
  • 5
    You can even trigger the function directly by running $("<selector>").sortable("option", "update")();
    – Ruben
    Commented Sep 25, 2015 at 0:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.