Submitting an ordered list to a server

Question

To teach myself Javascript, I'm trying to make a web page that gives users a list of items (e.g. 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 (e.g 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

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
)

Answer 3

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 4

The Scriptaculous library provides sortable lists and provides the sorted index that you can post back to the server.