jquery sortable draggable list - problems

I have some problems with my sortable draggable list using jQuery:

1. When loading the page and pressing the submit button the cgi gets the parameter my_selected_headers empty.
2. When loading the page changing the list order (by dragging) and pressing the submit button the cgi gets the parameter my_selected_headers NOT empty.
3. when pressing on the “add” button in order to add item from one list to the sortable-draggable list and pressing on the submit button the cgi gets the parameter my_selected_headers without the new item (in most of the cases).
4. the item in the parameters my_selected_headers looks: “Main[]=one&Main[]=two&MAIN[]=three”. Where the params names are: Main_one, Main_two and Main three.

I am using the following code:

In the ready method:

<TMPL_LOOP MY_HEADERS>
            var value = "<li id=\"<TMPL_VAR HEAD>\" class=\"handle\"><TMPL_VAR HEAD></li>";
            $("#my_headers").append(value);
            $("#my_h").css('color', 'black');
            $("#trash").show();
        </TMPL_LOOP>

Make all my headers to be sortable and draggable:

$(function() {
        $('ul.sortable').sortable({
            tolerance: 'pointer',
            cursor: 'pointer',
            dropOnEmpty: true,
            connectWith: 'ul.sortable',
            update: function(event, ui) {
                $("input#my_headers-log").val($('#my_headers').sortable('serialize'));
                if(this.id == 'trash') {
                    // Remove the element dropped on #trash
                    $('#'+ui.item.attr('id')).remove();
                } else {
                    // Update code for the actual sortable lists
                }
            }
        });
    });

when click on ADD my header button in order to add new header:

        $(function(){
        $("#addHeader").click(function(){
            var value = $("#my_possible_headers option:selected").text();
            var value2 = "<li id=\""+value+"\" class=\"handle\">"+value+"</li>";
            $("#my_headers").append(value2);
            $("#my_h").css('color', 'black');
            $("#trash").show();
        });
    });

In order to display the list (in table):

<tr>
            <td style="width: 200">Headers list:</td><td>
            <select id="my_possible_headers" style="width: 200" name="my_possible_headers"><TMPL_VAR MY_POSSIBLE_HEADERS></select></td>
            <td><input id="addHeader" class="add_button" type="button"/></td>
            <td id="my_h" style="color:white;text-align:center;text-decoration:underline">Selected headers:</td>
        </tr>
        <tr>
            <td></td><td></td>
            <td><ul id="tra开发者_开发技巧sh" class="sortable"></ul></td>
            <td><ul class="sortable regular" id="my_headers"></ul>
            <input name="my_selected_headers" type="hidden" size="70" id="my_headers-log"></input></td>
        </tr>

Does anyone can figure out what is the problem in my code?

Thanks in advance

Mike

Maybe you can explain a bit more of what you're trying to do?

For one:

 $('ul.sortable').sortable({
        tolerance: 'pointer',
        cursor: 'pointer',
        dropOnEmpty: true,
        connectWith: 'ul.sortable' // ?????

Why are you connecting the list with itself?