Сохранять jquery ui-sortable позиции в DB

Я пытаюсь воспроизвести функциональные возможности этой страницы (http://www.kissfm.ro/fresh-top-40/) для друга, у которого есть небольшое интернет-радио. Сайт настроен в wordpress fyi.

Итак, мой вопрос, после поиска stackoverflow, как мне сохранить/получить измененные диаграммы на основе ввода пользователей? я нашел, как сохранить одиночные представления, но как мне получить окончательные диаграммы на основе выбора пользователя?

Спасибо заранее! (код или ссылка на учебник приветствуются!)

Ответ 1

сделайте свой HTML-сортируемый, добавьте javascript и сохраните его в php при обновлении.

<ul id="sortable">
    <li id="1">elem 1</li>
    <li id="2">elem 2</li>
    <li id="3">elem 3</li>
    <li id="4">elem 4</li>
</ul>

$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

Ответ 2

Я знаю, что это старо, но то, что я делаю, просто добавляет скрытый элемент ввода в каждый LI. Все они будут иметь одно и то же имя с [] в конце. Таким образом, при отправке формы, содержащей UL, вы получите массив в своих значениях сообщений в том порядке, в котором вы просто поместите свой список.

Ответ 3

В соответствии со Сортируемыми документами мы должны префикс LI id некоторой строкой. Затем, если мы сериализуем сортировку в методе обновления, мы получим хороший массив в php, например. new_order [] = 1 & new_order [] = 2 и т.д.

var data = $(this).sortable('serialize');

<ul id="sortable">
    <li id="new_order_1">elem 1</li>
    <li id="new_order_2">elem 2</li>
    <li id="new_order_3">elem 3</li>
    <li id="new_order_4">elem 4</li>
</ul>

Ответ 4

You may POST with input  to DB and save it
Here we go:
<ul id="sortable">
    <li id="1"><input type ="text" value="elem 1"/></li>
    <li id="2"><input type="text" value="elem 2"/></li>
   .
   .
</ul>
<style>
 #sortable{
  border: hidden;
}
</style>
$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

Надеюсь, что это поможет;)