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

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

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

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

сделайте свой 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}); } }); }); 

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

Согласно Sortable docs, мы должны префикс идентификатора LI с некоторой строкой. Затем, если мы сериализуем сортировку в методе обновления, мы получим хороший массив в 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> 
 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}); } }); }); 

Надеюсь, поможет 😉