5

I'm using an UI sortable with in each item a delete button. Here is the delete function:

$('.delete_item').click(function(){
    $(this).closest('.grid_3_b').remove();
    initSortable();
    $(".sortable").sortable('refresh').trigger('update');
});

The div get's removed as I want to, but there is no update data sent to PHP.. So my script won't save the order and deleted item..

Here is my initSortable(); function:

function initSortable() {
    $( ".sortable" ).sortable({
        items: '.grid_3_b, .dropable',
        connectWith: ".sortable",
        placeholder: "placeholder",
        remove: function(event, ui) {
            if(!$('div', this).length) {
                $(this).next('.dropable').remove();
                $(this).remove();
            }
            initMenu();
        },
        receive: function(event, ui) {
            if( $(this).hasClass( "dropable" ) ) {
                if( $(this).hasClass( "gallery__item--active" ) ) {
                    $(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
                    $(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

                    initSortable();
                    $(".sortable").sortable('refresh').trigger('update');
                    initMenu();
                }
            }
        },
        update : function () {
            var neworder = new Array();
            $('.sortable').each(function() {
                var id  = $(this).attr("id");
                var pusharray = new Array();
                $('#' + id).children('div').each(function () {
                    var art = $(this).attr("data-art");
                    var pos = $(this).attr("data-pos");
                    pusharray.push( {data:{'art':art, 'pos':pos}} );
                });
                neworder.push({'id':id, 'articles':pusharray});
            });

            $.post("example.php",{'neworder': neworder},function(data){});
            initMenu();
        }
    }).disableSelection();
}

initSortable();

Also, the remove function normally deletes a column when it's empty, but doesn't work when deleted the latest item in the column.. Is this because the update trigger isn't called?

0

1 Answer 1

13

For manually triggering events in jquery-ui sortable, instead of specifying the handler in options object, you need to bind the event handler after sortable initialization.

For example the following will not work

$('ul').sortable({
  update: function () {
    console.log('update called');
  }
});
$('ul').trigger('sortupdate'); // doesn't work

Following works

$('ul').sortable();
$('ul').on('sortupdate',function(){
   console.log('update called');
});
$('ul').trigger('sortupdate'); // logs update called.

Demo

2
  • 2
    You're awesome, thanks for taking the effort of answering this old question! Jun 30, 2014 at 8:11
  • Hmm I have no idea. It was simply implemented like that by someone someday, or maybe proper callback is a missing feature
    – T J
    Mar 19, 2020 at 12:11

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.