Sende en ordnet liste til en server

stemmer
35

Å lære meg Javascript, jeg prøver å lage en nettside som gir brukerne en liste over elementer (f.eks mat), ber dem om å sortere disse matvarene fra favoritt til minst favoritt, og sende data når de er ferdige. Ved hjelp av jQuery sortables virker som en god måte å gjøre dette. Men jeg er ikke sikker på hvordan data innsending skal skje.

Her er hva jeg tenker. Hver av disse matvarer ville være i en div som dette:

<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>

Når brukeren klikker på en send -knappen, jeg vil rekkefølgen av disse elementene som skal bestemmes, og for bestilling å bli sendt tilbake til serveren (forresten, jeg bruker Django på serversiden). Det synes jeg kan bestemme rekkefølgen på elementene med en funksjon som dette:

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

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

Men jeg er fast på et par ting:

  • Hvor i min kode jeg vil kalle denne funksjonen? Jeg tenker det ville være en onclick handling når brukeren trykker på send-knappen, men jeg er ikke sikker på hvor data funksjonen returnerer ville bli passert.
  • Hvilket format vil være det mest hensiktsmessige for å sende denne bestilling til serveren (f.eks JSON)?

(Jeg vet dette er en veldig grunnleggende spørsmål, men jeg har aldri gjort en nettside med Javascript før, så dette området av programmering er alt nytt for meg.)

Publisert på 22/02/2009 klokken 18:41
bruker
På andre språk...                            


4 svar

stemmer
1

En mer semantisk relevant måte å gjøre en liste er ved hjelp av en faktisk <ul>element.

Så hvis du hadde noe sånt som dette:

<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>

Følgende jQuery kode ville være passende:

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

Ifølge jQuery docs på sorterbar , når du bruker serial elementene i en sorterbar det krever deres IDer til å være i et setname_numberformat. Så ved å ha listen som food_1, food_2osv erkjenner jQuery at ID Pizza er en og dets sett er mat. Den datavariable i saveFoodsviljen da inneholde noe sånt som food[]=1&food[]=2&food[]=3at du kan behandle i Django app.

Svarte 22/02/2009 kl. 18:44
kilden bruker

stemmer
-1

Det vil trolig være lettere å sette skjulte felt inne i listen over elementer. Når skjemaet er sendt, vil samme rekkefølge sendes til serveren i posten eller få.

Eksempel:

<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>

Innlegget vil da ha en rekke i det, som:

array(
    0 => 1,
    1 => 3,
    2 => 2
)
Svarte 22/02/2009 kl. 18:46
kilden bruker

stemmer
0

Ja, er normen noen form for brukerhandling, så en knapp klikk er et godt valg. Du vil skrive en rutine som kaller bestillingsrutinen og sender den til serveren.

JSON er et godt alternativ, som det er lett. Hvis du ønsker å spille litt mer, kan du ta turen til XML, men jeg ser svært liten grunn til å gjøre dette annet enn å lære, som XML legger unødvendig vekt i dette tilfellet.

Svarte 22/02/2009 kl. 18:49
kilden bruker

stemmer
0

Den Scriptaculous bibliotek gir sorterbar lister og gir den sorterte indeks som du kan legge tilbake til serveren.

Svarte 23/02/2009 kl. 19:33
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more