save jquery ui-sortable position to DB

Question

Im tratando de replicar la funcionalidad de esta página (http://www.kissfm.ro/fresh-top-40/) para un amigo que tiene una pequeña radio web. El sitio está configurado en wordpress fyi.

Así que mi pregunta es, después de buscar Stackoverflow, ¿cómo puedo guardar/obtener los gráficos revisados ​​en función de la entrada de los usuarios? encontré cómo guardar solo las presentaciones, pero ¿cómo obtengo los gráficos finales según la elección del usuario?

¡Gracias de antemano! (código o enlace a la bienvenida tutorial!)

Answer 1

hacer su HTML ordenable, agregar javascript y guardarlo en php en la actualización.

<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

Sé que esto es viejo, pero lo que hago es simplemente agregar un elemento de campo oculto en cada LI. Todos tendrían el mismo nombre con [] al final. De esta manera, cuando publique el formulario que contiene la UL, obtendrá una matriz en sus valores de publicación en el orden en que acaba de colocar su lista.

Answer 3

De acuerdo con los documentos Clasificables, tenemos que anteponer el ID de LI con alguna cadena. Luego, si serializamos el ordenable en el método de actualización obtendremos una buena matriz en php, p. new_order [] = 1 & new_order [] = 2, etc.

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> 

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

creo que sirve;)