Envío de una lista ordenada a un servidor

votos
35

Para enseñarme a mí mismo Javascript, intento hacer una página web que les dé a los usuarios una lista de elementos (por ejemplo, alimentos), les pida que clasifiquen estos alimentos de favoritos a menos favoritos y envíe los datos cuando los haya terminado. Usar jQuery sortables parece ser una buena forma de hacerlo. Sin embargo, no estoy seguro de cómo debe enviarse la información.

Esto es lo que estoy pensando. Cada uno de estos alimentos estaría en un 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>

Cuando el usuario hace clic en el botón enviar, quiero que se determine el orden de estos elementos y que este pedido se envíe de vuelta al servidor (por cierto, estoy usando Django en el lado del servidor). Parece que puedo determinar el orden de los elementos con una función como esta:

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

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

Sin embargo, estoy atascado en un par de cosas:

  • ¿Dónde en mi código llamaría a esta función? Estoy pensando que sería una acción de clic cuando el usuario presiona el botón de enviar, pero no estoy seguro de dónde pasarán los datos que devuelve la función.
  • ¿Qué formato sería el más apropiado para enviar este pedido al servidor (por ejemplo, JSON)?

(Sé que esta es una pregunta realmente básica, pero nunca antes había hecho una página web con JavaScript, por lo que esta área de programación es nueva para mí).

Publicado el 22/02/2009 a las 19:41
por usuario
En otros idiomas...                            


4 respuestas

votos
1

Una forma más semánticamente relevante de hacer una lista es usar un <ul>elemento real .

Entonces, si tuvieras algo como esto:

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

El siguiente código de jQuery sería apropiado:

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 acuerdo con los documentos jQuery en ordenable , cuando usa serializar los elementos de un ordenable, requiere que sus ID estén en un setname_numberformato. Entonces al tener su lista como food_1, food_2etc. jQuery reconoce que la ID de Pizza es 1 y su conjunto es comida. La datavariable en saveFoodsentonces contendrá algo así como food[]=1&food[]=2&food[]=3lo puedes procesar en tu aplicación Django.

Respondida el 22/02/2009 a las 19:44
fuente por usuario

votos
-1

Probablemente sería más fácil colocar campos ocultos dentro de la lista de elementos. Cuando se envía el formulario, se enviará el mismo pedido al servidor en la publicación o get.

Ejemplo:

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

La publicación tendrá una matriz, como:

array(
    0 => 1,
    1 => 3,
    2 => 2
)
Respondida el 22/02/2009 a las 19:46
fuente por usuario

votos
0

Sí, la norma es alguna forma de acción del usuario, por lo que un clic de botón es una buena opción. Escribirá una rutina que llame a la rutina de pedido y la envíe al servidor.

JSON es una buena opción, ya que es ligero. Si quieres jugar un poco más, puedes dirigirte a XML, pero veo muy pocas razones para hacer esto, aparte de aprender, ya que XML agrega un peso innecesario en esta instancia.

Respondida el 22/02/2009 a las 19:49
fuente por usuario

votos
0

La biblioteca Scriptaculous proporciona listas ordenables y proporciona el índice ordenado que puede publicar de nuevo en el servidor.

Respondida el 23/02/2009 a las 20:33
fuente por usuario

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