将有序列表提交到服务器

Question

To teach myself Javascript, I'm trying to make a web page that gives users a list of items (eg foods), asks them to sort these foods from favorite to least favorite, and submit the data when they're done. Using jQuery sortables seems like a good way to do this. However, I'm not sure how the data submission should happen.

Here's what I'm thinking. Each of these food items would be in a div like this:

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

When the user clicks a "submit" button, I want the order of these items to be determined, and for this ordering to be sent back to the server (by the way, I'm using Django on the server side). It seems I can determine the order of the items with a function like this:

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

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

However, I'm stuck on a couple of things:

• Where in my code would I call this function? I'm thinking it would be an onclick action when the user presses the submit button, but I'm not sure where the data the function returns would get passed.
• What format would be the most appropriate for sending this ordering to the server (eg JSON)?

(I know this is a really basic question, but I have never made a web page with JavaScript before, so this area of programming is all new to me.)

Answer 1

A more semantically relevant way of doing a list is by using an actual <ul> element.

So if you had something like this:

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

The following jQuery code would be appropiate:

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

According to the jQuery docs on sortable , when you use serialize the elements of a sortable it requires their IDs to be in a setname_number format. So by having your list as food_1 , food_2 , etc. jQuery recognizes that the ID of Pizza is 1 and its set is food. The data variable in saveFoods will then contain something like food[]=1&food[]=2&food[]=3 that you can process in your Django app.

Answer 2

Yes, the norm is some form of user action, so a button click is a good choice. You will write a routine that calls the ordering routine and sends it to the server.

JSON is a good option, as it is lightweight. If you want to play a bit more, you can head to XML, but I see very little reason to do this other than to learn, as XML adds unnecessary weight in this instance.

Answer 3

Scriptaculous库提供可排序的列表，并提供可以发布回服务器的排序索引。

Answer 4

It'd probably be easier to put hidden fields inside the list of items. When the form is submitted, the same order will be send to the server in the post or get.

Example:

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

The post will then have an array in it, like:

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