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.