Benyújtása egy rendezett lista a szerveren

szavazat
35

Tanítani magam Javascript, próbálok tenni egy weboldalt, amely biztosítja a felhasználók számára az elemek listáját (pl élelmiszerek), arra kéri őket, hogy rendezni ezeket az élelmiszereket kedvenc legkevésbé kedvelt, és küldje el az adatokat, amikor kész. JQuery sortables tűnik, mint egy jó módja ennek. Én azonban nem vagyok biztos benne, hogy az adatszolgáltatás történjen.

Itt van, amit én gondolok. Mindegyik ételt lenne egy div, mint ez:

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

Amikor a felhasználó rákattint a „küldés” gombot, azt akarjuk, hogy a sorrendben ezeket a tételeket meg kell határozni, és a rendelési vissza kell küldeni a szerver (by the way, én vagyok a Django a szerver oldalon). Úgy tűnik, meg tudja határozni a az elemek sorrendjét a funkció, mint ez:

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

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

Azonban biztos vagyok megakad egy pár dolgot:

  • Amennyiben a kód hívnám ezt a funkciót? Gondolkodom lenne egy onclick intézkedéseket, ha a felhasználó megnyomja a küldés gombot, de nem vagyok benne biztos, ha az adatokat a függvény visszatér kapnánk telt el.
  • Milyen formátumban lenne a legmegfelelőbb küldött rendelési a szerver (pl JSON)?

(Tudom, hogy ez egy nagyon alap kérdés, de én még soha nem tett egy weboldalt JavaScript előtt, így ezen a területen a programozás minden új számomra.)

A kérdést 22/02/2009 19:41
felhasználó
Más nyelveken...                            


4 válasz

szavazat
1

A szemantikailag releváns módon csinál egy lista segítségével tényleges <ul>elem.

Tehát, ha volt valami, mint ez:

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

A következő jQuery kódot lenne MEGFELELŐ:

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

Szerint a jQuery docs on rendezhető , ha használja szerializálni eleme egy rendezhető igényel az azonosítók, hogy egy setname_numberméret. Így azáltal, hogy a lista food_1, food_2stb jQuery elismeri, hogy az ID Pizza értéke 1, és a beállított étel. A dataváltozó saveFoodsakkor előbb egy olyasmi, mint food[]=1&food[]=2&food[]=3amit képes feldolgozni a Django alkalmazásban.

Válaszolt 22/02/2009 19:44
a forrás felhasználó

szavazat
-1

Ez lenne talán könnyebb lesz felrakni a rejtett mezők belsejében a tételek listáját. Ha az űrlap elküldése, ugyanabban a sorrendben fogja küldeni a szervernek a post, vagy kap.

Példa:

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

A bejegyzést, majd egy tömböt úgy, mint:

array(
    0 => 1,
    1 => 3,
    2 => 2
)
Válaszolt 22/02/2009 19:46
a forrás felhasználó

szavazat
0

Igen, a norma valamilyen felhasználói lépéseket, hogy amikor a gomb egy jó választás. Lesz levelet rutin, hogy felhívja a rendelési rutin, és elküldi a szervernek.

JSON egy jó lehetőség, mivel ez könnyű. Ha azt szeretnénk, hogy játsszon egy kicsit, akkor irány az XML, de látom, nagyon kevés oka, hogy ezt más, mint tanulni, mint az XML hozzáteszi felesleges súlyt ebben az esetben.

Válaszolt 22/02/2009 19:49
a forrás felhasználó

szavazat
0

A Scriptaculous könyvtár biztosítja rendezhető listák és biztosítja a rendezett index küldhet vissza a szerver.

Válaszolt 23/02/2009 20:33
a forrás felhasználó

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