jquery sortable list shows empty

Hi guys,

I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list.

I tried using this...

var response = $("#selected_numbers_box").val();
alert( response );


and I also tried this..

var response = $("#selected_numbers_box").html();
alert( response );


both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box".

Any suggestions? My code was taken directly from the jquery ui tutorial.

Thanks in advance.

Here is some of my code.


/* Make the white numbers sortable */
$(function() {
$("#available_numbers,#selected_numbers_box").sortable({
connectWith:".number-list",
}).disableSelection();
});

/* Make the red numbers sortable */
$(function() {
$("#available_supp_numbers,#selected_supp_numbers_box").sortable({
connectWith:".supp-number-list"
}).disableSelection();
});

<td valign="top" style="padding:10px;">
<ul id='available_numbers' class='number-list'>
<li class='number-item' id='0'>0</li>
<li class='number-item' id='1'>1</li>
<li class='number-item' id='2'>2</li>
<li class='number-item' id='3'>3</li>
<li class='number-item' id='4'>4</li>
<li class='number-item' id='5'>5</li>
</ul>
</td>
<td valign="top" style="padding:10px;">
<ul id="selected_numbers_box" class="number-list" >
</ul>
</td>


I tried the following as per the jquery docs but it still shows empty.


alert( $("#selected_numbers_box").sortable('serialize') );


Still no luck

Does anyone have some help for me?

I've got it now. I had to include an underscore into my option ID's. Works now.