I am working on this jsFiddle:
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.
I am working on this jsFiddle:
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.
Have achieved this (sort of) here:
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\""}]
Because you are adding literal quotes to the string. Instead of "indexPos": '"' + nodeIndex + '"'
just use "indexPos": nodeIndex
.
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!!