Как реализовать сортируемый список jQueryUI, выполняющий HTTP-запросы AJAX? - PullRequest
Новая
       9

Как реализовать сортируемый список jQueryUI, выполняющий HTTP-запросы AJAX?

1 голос
/ 27 октября 2011

Я использую Ruby on Rails 3.1.1 и jQueryUI 1.8.14. Я хотел бы реализовать сортируемый список jQueryUI и сохранить изменения положения связанных элементов в моей базе данных приложения. Чтобы реализовать \ сделать это Я планирую выполнить AJAX HTTP-запрос (конечно, включая правильную информацию \ данные, чтобы правильно сделать это эффективным \ легким и максимально возможным) каждый раз, когда пользователь меняет позицию предмета .

Как выполнить HTTP-запрос AJAX при изменении порядка элементов? Какие данные вы посоветуете рассмотреть \ отправить через HTTP-запрос AJAX?

1 Ответ

1 голос
/ 27 октября 2011

я недавно использовал jqueryUI sortable jquery ui sortable doc

Я использую поле базы данных, называемое INT 'order_by'.

вам нужно просто применить jqueryUI sortable () к нужному списку элементов, а затем передать через ajax сериализованный новый порядок (проверьте параметры пользовательского интерфейса для сортируемого, он имеет serialize или toArray {option}) на странице вашего контроллера .

Вы сохраняете новый ордер в БД и получаете рыбу. В моем случае каждое поле 'order_by' обновляется каждый раз, когда я сохраняю новый заказ.

редактировать 

$("#test-list").sortable({
                    cursor: 'move',
                    placeholder:'sortbale-highlight-holder',
                    tolerance:'pointer',
                    update: function() {
                    new_order = $(this).sortable("serialize");
                    somenthing_was_ordered = 1;
                }
        });

логика, которую я использовал:

порядок изменения пользователя, и я устанавливаю новый порядок в глобальной переменной. затем я использую вход для отправки запроса ajax и сохранения нового заказа.

в update: function () { } вы можете запустить запрос в любое время, потому что вы можете в любое время вернуть новый заказ в вызов ajax, но я предпочел сохранить немного памяти для запросов к серверу:)

...