tags:

views:

61

answers:

3

I am working on this jsFiddle:

http://jsfiddle.net/8vWXZ/10/

I want to post the order of the list items and their associated ID on the form submit to the server as a JSON object but am not sure where to start.

A: 

Have achieved this (sort of) here:

http://jsfiddle.net/8vWXZ/15/

Except if you see in the alert it outputs backslashes and i am not sure why:

[{"prodId":"item1","indexPos":"\"1\""},{"prodId":"item2","indexPos":"\"2\""},{"prodId":"item3","indexPos":"\"3\""},{"prodId":"item4","indexPos":"\"4\""}]
RyanP13
This should be an edit, since it's not really an answer.
RoToRa
+1  A: 

Because you are adding literal quotes to the string. Instead of "indexPos": '"' + nodeIndex + '"' just use "indexPos": nodeIndex.

RoToRa
+2  A: 

This may be a shorter approach -- I wrapped your text in a span and added a class of 'context' to it. Then I can use selectors a lot easier to pull out the data into a JSON-ized object.

Here's the change I made to the HTML (just a sample of one of the LI elements):

<li>
    <span class="up">Up1</span>
    <span class="down">Down1</span>
    <span class="content">Item 1</span>
</li>

Not sure if you're able to wrap it in a span or not, but I thought I'd try.

My updated fiddle is here: http://jsfiddle.net/Tn97g/

Here's my button click event handler:

$("#submit").click(function() {
    var items=$("#reOrder li");
    var tosubmit=[];
    $(items).each(function(index, e){
        var nextItem = { "id": e.id, "val" : $(e).find(".content").text() };
        tosubmit.push(nextItem );
    });
    alert(JSON.stringify(tosubmit));
});

It's a little more concise, but I'm not sure exactly what you're looking to do. I hope this helps!!

David Hoerster