Składając uporządkowaną listę do serwera

Question

Składając uporządkowaną listę do serwera

głosy

35

Uczyć sobie Javascript, Próbuję zrobić stronę internetową, która daje użytkownikom listę elementów (np żywności), prosi ich, aby uporządkować te pokarmy z faworytem najmniej ulubionym, i przesłać dane, kiedy skończysz. Korzystanie sortables jQuery wydaje się dobrym sposobem, aby to zrobić. Jednak nie jestem pewien, jak złożenie dane powinno się zdarzyć.

Oto co mam na myśli. Każdy z tych produktów spożywczych byłoby w div tak:

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

Gdy użytkownik kliknie przycisk „Wyślij”, chcę kolejność tych elementów, które zostaną określone, a do tego zamawiającego być wysłany z powrotem do serwera (nawiasem mówiąc, używam Django po stronie serwera). Wydaje się, mogę określić kolejność elementów z funkcji takich jak to:

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

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

Jednakże, utknąłem na kilka rzeczy:

Gdzie w moim kodu Nazwałbym tę funkcję? Myślę, że będzie to akcja onclick, gdy użytkownik naciśnie przycisk Prześlij, ale nie jestem pewien, gdzie dane funkcja powraca by przejdzie.
Jaki format byłoby najbardziej odpowiednie do wysyłania tego zamawianie do serwera (np JSON)?

(Wiem, że to jest naprawdę podstawowe pytanie, ale nigdy nie zrobił stronę internetową z JavaScript wcześniej, więc ten obszar programowania wszystko jest dla mnie nowe.)

javascript

Utwórz 22/02/2009 o 19:41
użytkownik RexE

W innych językach...

4 odpowiedzi

głosy

-1

Byłoby prawdopodobnie łatwiej umieścić ukryte wewnątrz pola listy elementów. Po wysłaniu formularza, taka sama kolejność zostanie wysłany do serwera w poście lub dostać.

Przykład:

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

Post zostanie wtedy tablicę w nim, jak:

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

Odpowiedział 22/02/2009 o 19:46
źródło użytkownik Darryl Hein

głosy

0

Tak, normą jest jakaś forma działania użytkownika, a więc kliknij przycisk jest dobrym wyborem. Będziesz napisać procedurę, która wywołuje procedurę zamawiania i wysyła je do serwera.

JSON jest dobrym rozwiązaniem, ponieważ jest lekki. Jeśli chcesz grać nieco więcej, można udać się do XML, ale widzę, bardzo niewiele powodów, aby to zrobić inny niż aby dowiedzieć się, jak XML dodaje niepotrzebne w danej instancji.

Odpowiedział 22/02/2009 o 19:49
źródło użytkownik Gregory A Beamer

głosy

0

Biblioteka Scriptaculous zapewnia sortowane przez list i zapewnia posortowaną indeks, który można wysłać z powrotem do serwera.

Odpowiedział 23/02/2009 o 20:33
źródło użytkownik Diodeus - James MacFarlane

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

Bardziej semantycznie istotny sposób prowadzenia listy jest poprzez zastosowanie rzeczywistej <ul>element.

Więc jeśli coś takiego:

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

Poniższy kod jQuery byłoby jest właściwa:

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

Zgodnie z docs jQuery na sortable , kiedy użyć serializacji z elementów sortable wymaga ich identyfikatory być w setname_numberformacie. Tak więc poprzez swoją listę jako food_1, food_2itp jQuery uznaje, że identyfikator Pizza jest 1, a jego set jest jedzenie. dataZmienną saveFoodswtedy zawierać coś takiego food[]=1&food[]=2&food[]=3, że można przetwarzać w swojej aplikacji Django.