сохранить JQuery UI-сортируемые позиции в БД

Question

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

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

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

Answer 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});
        }
    });
});

Answer 2

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

Answer 3

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

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

Answer 4

В соответствии с Сортируемыми документами мы должны добавить префикс идентификатора 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>