Odesláním seřazený seznam na server

Question

Odesláním seřazený seznam na server

hlasů

35

Chcete-li sám učit JavaScript, Snažím se vytvořit webovou stránku, která poskytuje uživatelům seznam položek (např potravin), požádá je, aby třídit tyto potraviny od favorit nejméně oblíbený, a odeslat data, když je hotovo. Pomocí jQuery sortables zdá jako dobrý způsob, jak to udělat. Nicméně, nejsem si jistý, jak by se data podání nestane.

Tady je to, co mám na mysli. Každá z těchto potravin by bylo v div, jako je tento:

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

Když uživatel klikne na tlačítko „odeslat“, chci pořadí těchto položek, které mají být stanoveny, a za tímto uspořádáním, které mají být zaslány zpět na server (mimochodem, já používám Django na straně serveru). Zdá se, že může určit pořadí položek s funkcí, jako je tento:

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

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

Nicméně, já jsem uvízl na několik věcí:

Je-li v mém kódu bych zavolat tuto funkci? Myslím, že to bude akce onclick, když uživatel stiskne tlačítko pro odeslání, ale nejsem si jistý, kde by si prošel datové funkce vrátí.
V jakém formátu by bylo nejvhodnější pro zaslání tohoto uspořádání k serveru (např JSON)?

(Vím, že to je opravdu základní otázka, ale nikdy jsem udělal webovou stránku s JavaScriptu předtím, takže tato oblast programování je vše pro mě něco nového.)

javascript

Položena 22/02/2009 v 19:41
uživatelem RexE

V jiných jazycích...

4 odpovědí

hlasů

-1

Bylo by asi bylo jednodušší dát skrytých polí v seznamu položek. Je-li odeslání formuláře, bude stejné pořadí se odeslat na server v poště nebo získat.

Příklad:

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

Příspěvek pak bude mít pole v ní, jako jsou:

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

Odpovězeno 22/02/2009 v 19:46
zdroj uživatelem Darryl Hein

hlasů

0

Ano, norma je určitá forma zásahu uživatele, takže tlačítko kliknutí je dobrá volba. Budete napsat rutina, která volá objednávání rutinu a odešle ji na server.

JSON je dobrá volba, protože je lehký. Chcete-li hrát trochu víc, můžete zamířit do XML, ale vidím velmi málo důvodů k tomu ten druhý, než se učit, jak XML přidává zbytečnou váhu v tomto případě.

Odpovězeno 22/02/2009 v 19:49
zdroj uživatelem Gregory A Beamer

hlasů

0

Knihovna Scriptaculous poskytuje sortable seznamy a poskytuje seřazený index, který můžete zveřejnit zpět na server.

Odpovězeno 23/02/2009 v 20:33
zdroj uživatelem Diodeus - James MacFarlane

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

Více sémanticky relevantní způsob, jak dělat seznam je pomocí aktuální <ul>prvek.

Takže pokud jste měli něco takového:

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

Následující kód jQuery by bylo náležité:

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

Podle dokumentů jQuery na sortable , při použití serializaci Prvky sortable to vyžaduje jejich ID být ve setname_numberformátu. Takže tím, že seznam as food_1, food_2atd jQuery uznává, že číslo Pizza je 1 a jeho množina je jídlo. dataProměnná saveFoodspak obsahuje něco takového food[]=1&food[]=2&food[]=3, který dokáže zpracovat ve své Django aplikace.