Submeter uma lista ordenada para um servidor

Question

Submeter uma lista ordenada para um servidor

votos

35

Para ensinar-me Javascript, eu estou tentando fazer uma página web que dá aos usuários uma lista de itens (por exemplo, alimentos), pede-lhes para classificar estes alimentos de favorito para menos favorito, e enviar os dados quando eles são feitos. Usando sortables jQuery parece ser uma boa maneira de fazer isso. No entanto, eu não sei como a apresentação dos dados deve acontecer.

Aqui está o que eu estou pensando. Cada um desses itens de alimentos estaria em uma div como este:

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

Quando o usuário clica em um botão enviar, eu quero o fim desses itens a ser determinado, e por esta ordenação a ser enviado de volta para o servidor (a propósito, estou usando Django no lado do servidor). Parece que pode determinar a ordem dos itens com uma função como esta:

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

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

No entanto, eu estou preso em um par de coisas:

Onde no meu código que eu iria chamar esta função? Eu estou pensando que seria uma ação onclick quando o usuário pressiona o botão enviar, mas não tenho certeza de onde os dados a função retorna iria conseguir passar.
O formato seria o mais adequado para o envio desta encomenda para o servidor (por exemplo JSON)?

(Eu sei que esta é uma pergunta muito básica, mas eu nunca fiz uma página web com JavaScript antes, então esta área de programação é tudo novo para mim.)

javascript

Publicado 22/02/2009 em 19:41
usuário RexE

Em outras línguas...

4 respostas

votos

-1

Provavelmente seria mais fácil colocar campos ocultos dentro da lista de itens. Quando o formulário é enviado, o mesmo pedido será enviado ao servidor no POST ou GET.

Exemplo:

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

O posto terá, então, uma série nela, como:

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

Respondeu 22/02/2009 em 19:46
fonte usuário Darryl Hein

votos

0

Sim, a norma é alguma forma de ação do usuário, de modo que um clique de botão é uma boa escolha. Você vai escrever uma rotina que chama a rotina de ordenação e envia para o servidor.

JSON é uma boa opção, pois é leve. Se você quiser jogar um pouco mais, você pode cabeça para XML, mas eu vejo muito pouca razão para fazer isso a não ser para aprender, como XML adiciona peso desnecessário neste caso.

Respondeu 22/02/2009 em 19:49
fonte usuário Gregory A Beamer

votos

0

A biblioteca de Scriptaculous fornece listas classificáveis e fornece o índice ordenado que você pode enviar de volta para o servidor.

Respondeu 23/02/2009 em 20:33
fonte usuário Diodeus - James MacFarlane

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

Uma maneira mais semanticamente relevante de fazer uma lista é usando um real <ul>elemento.

Então se você tivesse algo como isto:

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

O seguinte código jQuery seria apropriado:

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

De acordo com os docs jQuery sobre classificáveis , quando você usa seriar os elementos de um classificáveis que exige seus IDs de estar em um setname_numberformato. Então, por ter sua lista como food_1, food_2, etc. jQuery reconhece que o ID de Pizza é 1 e seu conjunto é a comida. A datavariável saveFoodsconterá então algo como food[]=1&food[]=2&food[]=3que você pode processar em seu aplicativo Django.