Обновить страницу с помощью Jquery Connected Sortable, если элемент помещен в определенный контейнер - PullRequest
Новая
       0

Обновить страницу с помощью Jquery Connected Sortable, если элемент помещен в определенный контейнер

0 голосов
/ 17 мая 2011

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

Если пользователь перетаскивает элемент в сортируемую "#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();
        }
    });
});

1 Ответ

2 голосов
/ 17 мая 2011

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

Что касается обновления, вам просто нужно устанавливать логическую переменную всякий раз, когдавы думаете, что требуется обновление, затем привяжите событие к .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();
        }
    });
});

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

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

...