Question

I have made a sortable list.

Based on the order of the sortable list i want to insert text into a textarea #notes.
is there anyway I can have text sorted based on the list so even if i change the order. the text in the textarea should change accordingly

eg

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>


entry 1 = "this is line 1"
entry 2 = "this is line 2"

I am not sure if i have to use Ajax or something to have this done. since i want each list item to have predefinded text.

I am trying to learn Jquery and would really apprieciate any help.
any hints on how i can have this done.

Question

Where and how do i store these predefined values ?
How to get the text in the text area sorted ?

can someone please point me in the right directions

Answer 1

Maybe write a javascript function to refreshTextarea() that you will use initially to fill the textarea and every time the sorting changes it will “refresh” it by emptying and refilling depending on the sort order of the list.

ok, to associate values with your list items, give your ul an id and your li unique ids

<ul id="the-list">
    <li id="item-1">entry 1</li>
    ...
</ul>

then for each list item, create a hidden input with an id that corresponds in some way

<input type="hidden" id="item-1-data" value="this is where you put info for the list item entry 1" />

Then with jquery you programmatically associate them by looping through your list items and refreshing your textarea after any sort is made.

$('#the-list li').each(function() {
    //get the id of the list's data field
    var li-data-id = $(this).attr("id") + '-data';

    // get the actual data associated with this list item
    var li-data = $(li-data-id).val();

    // append next list's data in the textarea
    $('#id-of-textarea').val($('#id-of-textarea').val() + "\n" + li-data)
}