Question

My connected sortables work great but I’m trying to make one improvement:

If a user drags in item into the “#buttonmaker” sortable, I want the entire page to refresh.

What’s happening is if a user drags an item into the buttonmaker sortable, my ajax sorting.php page updates the database with a new menu button based off the item the user dropped in. After that, the page needs to be refreshed so the user can see the new menu button that they just created.

95% of the time though users will not be using the #buttonmaker and I don’t need a page refresh… ajax does it’s thing. It’s just for this one #buttonmaker container that I need a page refresh. Thanks for any help.

$(function() {
    $("#draft, #trash, #a_bunch_more_divs, #buttonmaker").sortable({
        connectWith: '.connectedSortable',
        placeholder: 'ui-state-highlight',
        opacity: 0.6,
        scroll: true,
        update : function () 
        { 
            $.ajax(
            {
                type: "POST",
                url: "sorting.php",
                data: 
                {
                    draft_sort:$("#draft").sortable('serialize'),
                    trash_sort:$("#trash").sortable('serialize'),
                    other_sort:$("#a_bunch_more_divs").sortable('serialize'),
                    buttonmaker_sort:$("#buttonmaker").sortable('serialize')
                }
            });
        }
    }).disableSelection();
});

Updated Code (I’ve changed a few cosmetic things since the original post):

$(function() {
    var refreshNeeded = false;
    $("#draft, #published, #trash").sortable({
        connectWith: '.connectedSortable',
        placeholder: 'ui-state-highlight',
        opacity: 0.6,
        scroll: true,
        update : function (event, ui) 
        { 
            var $sortable = $(this);
            if(ui.item.parent()[0] != this) return;
            var postData = {};
            postData[$sortable.attr('id') + '_sort'] = $sortable.sortable('serialize');
            if(ui.sender){
                postData[$sortable.attr('id') + '_sort'] = ui.sender.sortable('serialize');
            }
            $.ajax(
            {
                type: "POST",
                url: "js/post_sorting.php",
                data: postData,
                success: function() {
                    if(($sortable.attr('id') == "published")) refreshNeeded = true;
                    /*window.location.reload(true);*/
                }
            });
        }
    }).disableSelection();
    $(document).ajaxStop(function(){
        if(refreshNeeded){
            window.location.reload();
        }
    });
});

Answer 1

It is always a good idea to check for the outcome of your ajax call. Also, sending the whole thing on every update is a waste of resources, as the update event gets called for both the source and the target sortable.

As for the refresh, you just need to set a boolean variable whenever you think a refresh is needed, then bind an event to .ajaxStop() to run when all ajax requests have completed.

$(function(){
    var refreshNeeded = false;

    $("#draft, #trash, #a_bunch_more_divs, #buttonmaker").sortable({
        connectWith: '.connectedSortable',
        placeholder: 'ui-state-highlight',
        opacity: 0.6,
        scroll: true,
        update : function(event, ui){
            var $sortable = $(this);

            // To avoid double-firing the event, return if it's not the sortable
            // where the item was dropped into.
            if(ui.item.parent()[0] != this) return;

            // Create object from the current sortable to post
            var postData = {};
            postData[$sortable.attr('id') + '_sort'] = $sortable.sortable('serialize');

            // If the item came from a connected sortable, include that in the post too
            if(ui.sender){
                postData[ui.sender.attr('id') + '_sort'] = ui.sender.sortable('serialize');
            }

            $.ajax(
            {
                type: "POST",
                url: "sorting.php",
                data: postData,
                success: function(){
                    // What if we're all happy?

                    // If the triggering sortable was the buttonmaker, set the refresh flag
                    if($sortable.attr('id') == "buttonmaker")) RefreshNeeded = true;
                },
                error: function(){
                    // What if there is an error?
                }
            });
        }
    }).disableSelection();

    $(document).ajaxStop(function(){
        // All requests have completed, check if we need to refresh
        if(refreshNeeded){
            // Refresh the page (just a simple reload for now)
            window.location.reload();
        }
    });
});

Edit: Added bit of code to only send current sortable in the post data. It assumes that the name of the data will always be id_sort, where id is the id of your sortable.

Edit 2: Added some more bits to avoid double-firing the event, so it will only submit once per move. If item came from a connected sortable, it will include both sortables in the request.