La presentazione di una lista ordinata a un server

Question

La presentazione di una lista ordinata a un server

voti

35

Per insegnare a me stesso Javascript, sto cercando di fare una pagina web che offre agli utenti un elenco di elementi (ad esempio alimenti), chiede loro di ordinare questi alimenti da favorito a meno favorito, e inviare i dati quando hanno finito. Utilizzando sortables jQuery sembra un buon modo per fare questo. Tuttavia, non sono sicuro di come la presentazione dei dati dovrebbe accadere.

Ecco quello che sto pensando. Ognuno di questi prodotti alimentari sarebbe in un div in questo modo:

<div id=sortable>
    <div id=1 class=foods>Pizza</div>
    <div id=2 class=foods>Sushi</div>
    <div id=3 class=foods>Taco</div>
</div>

Quando l'utente fa clic su un pulsante invia, voglio che l'ordine di questi elementi da determinare, e per questo ordinamento da inviare al server (a proposito, sto usando Django sul lato server). Mi sembra di determinare l'ordine degli elementi con una funzione come questa:

function getOrder()
{
    var foods = $(.foods);
    var ids = [];

    for(var x=0; x<foods.length; x++)
    {
        ids.push(foods[x].id);
    }
    return ids;
}

Tuttavia, mi sono bloccato su un paio di cose:

Dove nel mio codice dovrei chiamare questa funzione? Sto pensando che sarebbe un'azione onclick quando l'utente preme il pulsante di invio, ma non sono sicuro dove otterrebbero superato i dati la funzione ritorna.
Che formato sarebbe il più appropriato per l'invio di questo ordinamento al server (ad esempio JSON)?

(So che questo è una domanda veramente di base, ma non ho mai fatto una pagina web con JavaScript prima, quindi questa zona di programmazione è tutto nuovo per me.)

javascript

È pubblicato 22/02/2009 alle 19:41
dall'utente RexE

In altre lingue...

4 risposte

voti

-1

È probabilmente più facile da mettere campi nascosti all'interno della lista di elementi. Quando il modulo viene inviato, lo stesso ordine verrà inviato al server nel post o ottenere.

Esempio:

<div id="sortable">
    <div id="1" class="foods"><input type="hidden" name="sortable[]" value="1" />Pizza</div>
    <div id="2" class="foods"><input type="hidden" name="sortable[]" value="2" />Sushi</div>
    <div id="3" class="foods"><input type="hidden" name="sortable[]" value="3" />Taco</div>
</div>

Il post avrà quindi un array in esso, come:

array(
    0 => 1,
    1 => 3,
    2 => 2
)

Risposto il 22/02/2009 a 19:46
fonte dall'utente Darryl Hein

voti

0

Sì, la norma è una qualche forma di azione dell'utente, quindi un pulsante di scatto è una buona scelta. Potrai scrivere una routine che chiama la routine di ordinamento e lo invia al server.

JSON è una buona opzione, in quanto è leggero. Se si vuole giocare un po 'di più, è possibile testa a XML, ma vedo molto poche ragioni per fare questo diverso per imparare, come XML aggiunge peso inutile in questo caso.

Risposto il 22/02/2009 a 19:49
fonte dall'utente Gregory A Beamer

voti

0

La libreria Scriptaculous fornisce liste ordinabili e fornisce l'indice ordinato che è possibile inviare al server.

Risposto il 23/02/2009 a 20:33
fonte dall'utente Diodeus - James MacFarlane

Paolo Bergantino · Accepted Answer · 2009-02-22 19:44

Un modo più semanticamente rilevanti di fare una lista è quello di utilizzare un vero e proprio <ul>elemento.

Quindi, se si ha qualcosa di simile:

<ul id='foods'>
<li id='food_1'>Pizza</li>
<li id='food_2'>Sushi</li>
<li id='food_3'>Taco</li>
</ul>
<a href="javascript:saveFoods();">Save Order</a>

Il seguente codice jQuery sarebbe appropriata:

function saveFoods(id) {
    var data = $("#foods").sortable('serialize');
    var action = "/django/view/";
    $.post(action, data, function(json, status) {
        if(status == 'success' && json.status == 'success') {
            alert('Saved order of the foods!');
        } else {
            alert('Unable to complete the request.');
        }
    }, "json");
}

Secondo la documentazione jQuery su ordinabile , quando si utilizza serializzare gli elementi di una ordinabile richiede loro ID di essere in un setname_numberformato. Così da avere la vostra lista come food_1, food_2ecc jQuery riconosce che l'ID della pizza è 1 e il suo set è il cibo. La datavariabile saveFoodsconterrà quindi una cosa del genere food[]=1&food[]=2&food[]=3che è possibile elaborare nel vostro Django app.