Question

I’ve made an editable list with elements that can be dragged around using jQuery ui and jeditable.
Now I want to ‘post’ the the content of the list and save it.
How do I “serialize” the contents of the list?

for instance, if I have the list:

<ol id="topics">
    <li><span class="editable">random topic</span></li>
    <li><span class="editable">another topic</span></li>
    <li><span class="editable">third topic</span></li>
</ol>

How do I convert it to the string:

?topics1=random topic&topic2=...

I hope this makes sense.
My goal is to the save the list order and contents by using post.
Thanks

Answer 1

var data = $('#topics .editable').map(function() {
    return $(this).text();
}).get();

Then simply use this array in an AJAX call or serialize it e.g. as JSON and store it in a form field.

Since you want a querystring, have a look at the format generated by $.param({topics: data}). It will result in a php-style query string containing an array: topics[]=abc&topics[]=def

Since you mentioned you are going to use $.post:

$.post('url', { topics: data }, function() { /* ... */ });

Then, assuming you use PHP on the server-side, you have an array $_POST['topics']

---

If you really want topic1, etc., use this:

var data = {};
$('#topics .editable').each(function(i) {
    data['topic' + (i + 1)] = $(this).text();
});

$.post('url', data);