document.getElementById

[eluser]Jbeasley6651[/eluser]
I need to get the id from the list element so i can use it in my JS.

I have the following source code (from my view)

Code:

<div id="rightColumn">
    <h3>The PatternC</h3>
    <ul id="listC" class="connect">
        &lt;?php foreach($getcat2->result() as $box) :?&gt;

            <li id="recordsArray_&lt;?php echo $box->boxID ?&gt;">&lt;?php echo $box->boxID . $box->boxText ?&gt;</li>
            &lt;?php endforeach; ?&gt;
        </ul>
    </ul>
</div>

and the following JS

Code:

$("#listA, #listB, #listC").sortable({
            connectWith: ['.connect'],
            over: function(event, ui) {
                    var order = 'listname=' + $(this).attr('id') + '&id;=' + '2';
                    $.post("home/jupdate", order, function(theResponse){
                        $("#contentRight").html(theResponse);
                    });                                                          
            }
        
        });

Currently if you see the number '2' i need to be using the li id variable here.

[eluser]slowgary[/eluser]
Try posting a little more info. What is it you're trying to do? I'm assuming you don't plan on hardcoding the id. You could bind an event on each of the list items, e.g.

Code:

foreach()
   <li class='sort_item'><php echo $box->boxText; ?&gt;</li>
endforeach;

&lt;script type='text/javascript'&gt;
var current_item_id = NULL;
$('.sort_item').each(function(){
     $(this).bind('mousedown', function(){
          current_item_id = $(this).attr('id');
     });

     $(this).bind('mouseup', function(){
          current_item_id = NULL;
     });
});

$("#listA, #listB, #listC").sortable({
            connectWith: ['.connect'],
            over: function(event, ui) {
                    var order = 'listname=' + $(this).attr('id') + '&id;=' + current_item_id;
                    $.post("home/jupdate", order, function(theResponse){
                        $("#contentRight").html(theResponse);
                    });                                                          
            }
});

This might work, but there's probably a better way. Doesn't the sortable method provide you with a way to access the active element and it's attributes? When you specify the 'over:' handler or callback, you have access to the event object, so you should be able to do something like:

Code:

$("#listA, #listB, #listC").sortable({
            connectWith: ['.connect'],
            over: function(event, ui) {
                    var order = 'listname=' + $(this).attr('id') + '&id;=' + $(event.srcElement).attr('id');
                    $.post("home/jupdate", order, function(theResponse){
                        $("#contentRight").html(theResponse);
                    });
            }
});

Good luck with that. I would do a bunch more investigating if I were you. Usually when you're using a sortable list, you need to send the elements or the entire list to a server side script in order for the sortable list to actually be useful. For this reason, what you're trying to do should be very easy and commonplace. Maybe you can find better help on #jquery irc channel. If you're not familiar with irc, try searching google for a web based client called mibbit, choose the freenode network, and type in '#jquery' for the channel.