Get all textbox values from list (jQuery Sortable)?

Question

I have an unordered list, each list item has an id (id="6~OriginalName") - when I do a toArray on this list, I get a nice array and each item looks like "6~OriginalName" that I can parse later on.

$("#roleList").sortable('toArray')

The problem is that now I've embedded a TextBox in each list, which its value that of the OriginalName, the user can now edit the name. But "toArray" only creates the array based on the id.

How can I create a nice array of "6~UserEditedName" from the textbox?

If I have to do it manually I will - toArray like before, somehow create an array based on ALL the textbox values and combine the 2. But I have no idea how to access each textbox.

Oh - the user can also add new items in the list (therefore embedded textbox) because I have an append() going on as well :P

I hope this makes sense.

Picture a list with a bunch of texboxes where you can "edit" the list.

Answer 1

This solution will be inexact, since you didn't post your full code. What you can to do is find all of the textboxes using the appropriate jQuery selector, then run a function against the selection to build your array. Ex:

var myArray = new Array();
$('#roleList input.myTextBox').each(function() {
 var $textBox = $(this);
 myArray.push($textBox.attr('id') + '~' + $textBox.val());
 $textBox = null;
});

Answer 2

You could work on the data level and then render (or modify) the list when there are changes.

If your data is complex, you could give jOrder http://github.com/danstocker/jorder a try as it's designed to deal with fast search, sorting & grouping on the JS side.