Trimiterea o listă ordonată la un server

voturi
35

Pentru a mă preda Javascript, am încercat să fac o pagină web care oferă utilizatorilor o listă de elemente (de exemplu, alimente), le cere pentru a sorta aceste alimente de la preferat cel preferat la, și să transmită datele când au terminat. Utilizarea sortables jQuery pare ca o modalitate buna de a face acest lucru. Cu toate acestea, eu nu sunt sigur cum ar trebui să se întâmple transmiterea de date.

Iată ce mă gândesc. Fiecare dintre aceste produse alimentare ar fi într-un div ca aceasta:

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

Atunci când utilizatorul face clic pe un buton „submit“, vreau ordinea acestor elemente care urmează să fie determinată, iar pentru această ordonare să fie trimis înapoi la server (apropo, eu sunt, folosind Django pe partea de server). Se pare că pot determina ordinea elementelor cu o funcție de genul:

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

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

Cu toate acestea, eu sunt blocat pe câteva lucruri:

  • În cazul în care în codul meu aș numi această funcție? Mă gândesc că ar fi o acțiune onclick atunci când utilizatorul apasă pe butonul de trimitere, dar nu sunt sigur în cazul în care datele revine funcției ar obține trecut.
  • În ce format ar fi cel mai potrivit pentru a trimite această ordonare la server (de exemplu, JSON)?

(Știu că acest lucru este o întrebare foarte de bază, dar nu am mai făcut o pagină web cu JavaScript înainte, astfel încât acest domeniu de programare este cu totul nou pentru mine.)

Întrebat 22/02/2009 la 19:41
de către utilizator
În alte limbi...                            


4 răspunsuri

voturi
1

Un mod mai relevant semantically de a face o listă este prin utilizarea unui efectiv de <ul>element.

Deci, dacă ai avut ceva de genul:

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

Următorul cod jQuery ar poate amenaja:

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

Conform docs jQuery pe Sortable , atunci când utilizați serializa elementele unei Sortable necesită ID - urile lor să fie într - un setname_numberformat. Deci , de a avea lista dvs. ca food_1, food_2etc. jQuery recunoaște că ID - ul de Pizza este 1 și setul său este hrana. dataVariabila saveFoodsva fi apoi conține ceva de genul pe food[]=1&food[]=2&food[]=3care le poate procesa în aplicația Django.

Publicat 22/02/2009 la 19:44
sursa de către utilizator

voturi
-1

Ar fi, probabil, mai ușor de a pune câmpuri ascunse în interiorul listei de articole. Atunci când formularul este trimis, aceeași ordine va fi trimite la server în postul sau pentru a obține.

Exemplu:

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

Acest post va avea apoi o matrice în ea, cum ar fi:

array(
    0 => 1,
    1 => 3,
    2 => 2
)
Publicat 22/02/2009 la 19:46
sursa de către utilizator

voturi
0

Da, norma este o formă de acțiune din partea utilizatorului, astfel încât un buton clic este o alegere bună. Vei scrie o rutina care apelează rutina prin care se dispune si trimite-l la server.

JSON este o opțiune bună, deoarece este ușor. Dacă doriți să joace un pic mai mult, vă puteți îndrepta spre XML, dar eu văd un motiv foarte puțin pentru a face acest lucru, altele decât pentru a învăța, ca XML adauga greutate inutile în acest caz.

Publicat 22/02/2009 la 19:49
sursa de către utilizator

voturi
0

Biblioteca Scriptaculous oferă liste Sortable și oferă indexul sortat pe care le puteți posta înapoi la server.

Publicat 23/02/2009 la 20:33
sursa de către utilizator

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