Блог

Мои подключенные сортировочные таблицы отлично работают, но я пытаюсь внести одно улучшение:

Если пользователь перетаскивает элемент в сортировку «#buttonmaker», я хочу, чтобы обновилась вся страница.

Что происходит, если пользователь перетаскивает элемент в сортируемый buttonmaker, мой ajax sorting.php страница обновляет базу данных новой кнопкой меню на основе элемента, введенного пользователем. После этого страницу необходимо обновить, чтобы пользователь мог видеть новую кнопку меню, которую он только что создал.

в 95% случаев, хотя пользователи не будут использовать #buttonmaker и мне не нужно обновление страницы … ajax делает свое дело. Мне нужно обновить страницу только для этого #buttonmaker контейнера. Спасибо за любую помощь.

 $(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();
});
  

Обновленный код (я изменил несколько косметических вещей с момента публикации исходного сообщения):

 $(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();
        }
    });
});
  

Всегда полезно проверить результат вашего вызова ajax. Кроме того, отправка всего этого при каждом обновлении является пустой тратой ресурсов, поскольку событие update вызывается как для исходного, так и для целевого сортируемого.

Что касается обновления, вам просто нужно установить логическую переменную всякий раз, когда вы считаете, что обновление необходимо, затем привязать событие к .ajaxStop() для запуска после завершения всех запросов ajax.

 $(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();
        }
    });
});
  

Редактировать: Добавлен бит кода для отправки только текущей сортировки в данных post. Предполагается, что имя данных всегда будет id_sort , где id — идентификатор вашего сортируемого.

Правка 2: Добавлено еще несколько битов, чтобы избежать двойного запуска события, поэтому оно будет отправляться только один раз за ход. Если элемент получен из подключенной таблицы сортировки, он будет включать обе таблицы сортировки в запрос.