Link to home
Start Free TrialLog in
Avatar of PixelMuse
PixelMuse

asked on

jQuery - retrieve all ID's from an unordered list

I am trying to implement a sortable list using jQuery, but running into a snag. The following code is not returning the IDs like I expected it too.

I don't think there is anything wrong with the syntax here, but obviously something is off.

I'm using a ListView to hold my data, and the ID's are showing up correctly in that.

I'm using the plugin located here: http://www.utdallas.edu/~jrb048000/ListReorder/


var lists = $('.lists').ListReorder(options);
                var items = [];
                lists.bind('listorderchanged', function (evt, jqList, listOrder) {
                    for (var i = 0; i < listOrder.length; i++) {
                        items[i] = $("ul li:eq(" + i + ")").attr('id');
                    }

Open in new window

<ul class="lists">
            <asp:ListView ID="lvSliders" runat="server">
                <LayoutTemplate>
                    <asp:Panel ID="itemPlaceHolder" runat="server" />
                </LayoutTemplate>
                <ItemTemplate>
                    <li id='<%# DataBinder.Eval(Container.DataItem, "Id")%>'>
                        <%# DataBinder.Eval(Container.DataItem, "Title")%></li>
                </ItemTemplate>
                <ItemSeparatorTemplate>
                </ItemSeparatorTemplate>
            </asp:ListView>
           </ul>

Open in new window

Avatar of Salim Fayad
Salim Fayad
Flag of Lebanon image

Can you post the "Page Source"?
I think that the problem is that you set the "class" attribute to be "lists" while you should have used the "id" attribute of the "ul" to be "lists" and in the jquery: $("#lists")
Avatar of PixelMuse
PixelMuse

ASKER

Hi,

I did try setting the id if the 'ul' to something and that didn't work. Tried that awhile ago actually. Still loops through all of the 'li' elements, but nothing is returned.

Here is all the script on the page and the markup from the dynamic page while debugging.


How much other page source do you want to see? That's really all that is relevant here I believe.
<ul id="lists">
            
                    
                    <li id='dabf1050-2b89-4b44-9d8f-3356717dd04b'>
                        Adult Indoor Soccer Leagues</li>
                
                
                    <li id='50fc2b2e-b9ec-406f-abb8-44703907a5de'>
                        Upcoming Events</li>
                
                
                    <li id='488d0b00-fcdd-4bbe-88cc-74c448b43f63'>
                        ASC Futbol Club (Competitive Outdoor Program)</li>
                
                
                    <li id='8a7dd482-0a74-4a5b-b9c3-7c695b3e5e52'>
                        Youth Indoor Soccer</li>
                
                
                    <li id='1140e5f9-7abb-42d6-b054-9d30461fc4a9'>
                        ASC. Arizona's Premiere Indoor Soccer Facility</li>
                
                
           </ul>

Open in new window

<script type="text/javascript">
        $(document).ready(function () {
            var options = {
                itemHoverClass: 'itemHover',
                dragTargetClass: 'dragTarget',
                dropTargetClass: 'dropTarget',
                useDefaultDragHandle: true
            };

            var lists = $('#lists').ListReorder(options);
            var items = [];
            lists.bind('listorderchanged', function (evt, jqList, listOrder) {
                for (var i = 0; i < listOrder.length; i++) {
                    items[i] = $("ul li:eq(" + i + ")").attr('id');
                }
            });


            $('#btnSave').click(function () {
                if (items.length > 0) {
                    var jsonText = JSON.stringify({ items: items });
                    $.ajax({
                        type: "POST",
                        url: 'ManageSliders.aspx/SaveReOrder',
                        data: jsonText,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function () { $("#result").html("New order saved successfully"); },
                        failure: function (msg) { alert(msg); }
                    });
                }
                else {
                    alert("You have made no changes");
                }
            });
        });
    </script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of kawzaki
kawzaki

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
i just wanted to add, the sample i attached has console.log(), which will cause a javascript error if tested in IE browser. disable that line if you dont have a console (like firebug) to debug javascripts.

regards.
Stepping through that sample, show they are indeed coming across, at least in the log.

Cannot figure out why my array is empty in .Net. Since the call is async, is something wrong there?

Any tips on troubleshooting asynchronous stuff?