salva jquery posizioni ordinabili su DB

Question

Sto cercando di replicare la funzionalità di questa pagina (http://www.kissfm.ro/fresh-top-40/) per un amico che ha una piccola web radio. Il sito è configurato in wordpress fyi.

Quindi la mia domanda è, dopo aver cercato StackOverflow, come posso salvare/ottenere i grafici rivisti in base all'input degli utenti? ho trovato come salvare singoli invii, ma come posso ottenere i grafici finali in base alla scelta dell'utente?

Grazie in anticipo! (codice o collegamento all'esercitazione di benvenuto!)

Answer 1

rendere il codice HTML ordinabile, aggiungere javascript e salvare su php durante l'aggiornamento.

<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

So che questo è vecchio, ma quello che faccio è semplicemente aggiungere un elemento di input nascosto in ogni LI. Avrebbero tutti lo stesso nome con [] alla fine. In questo modo, quando pubblichi il modulo contenente l'UL, riceverai un array nei tuoi valori di post nell'ordine in cui hai appena inserito la tua lista.

Answer 3

In base ai documenti Sortable, è necessario prefissare l'ID LI con una stringa. Quindi se serializziamo l'ordinabile nel metodo di aggiornamento otterremo una bella matrice in php, ad es. NEW_ORDER [] = 1 & NEW_ORDER [] = 2 ecc

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

speriamo vi sia utile;)