Bug Tracker

#2730 closed bug (invalid)

Opened April 21, 2008 09:38PM UTC

Closed April 30, 2008 10:18AM UTC

Last modified March 14, 2012 09:49PM UTC

Unable to retreive index of sortable element during update event.

Reported by: GothAlice Owned by: paul
Priority: undecided Milestone:
Component: ui Version: 1.2.3
Keywords: sortables Cc:
Blocked by: Blocking:
Description

At no point during the internal handler for the stop event can the index for the current / last modified element be retrieved, thus the index of said element can not be retrieved from within any scripted update handler. The following code does not work, but should:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="jquery.js"></script>
        <script src="jquery.dimensions.js"></script>
        <script src="jquery.interface.js"></script>

        <script>
            $(document).ready(function(){
                $("#myList").sortable({
                    handle: 'b',
                    update: function(e, ui){
                        var index = $(ui.element).children().index(ui.item);
                        $("div#myListDragged").text("That was a div with new index #" + index);
                    }
                });
                
                $("li").dblclick(function () {
                    var index = $("#myList li").index(this);
                    $("div#myListClicked").text("That was div index #" + index);
                });
                
            });
        </script>
        <style>
            ul { list-style: none; }
            li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }
            b { cursor: move; }
            div { color: red; }
        </style>
    </head>
    <body>
        
        <ul id="myList">
            <li><b>Handle</b> Item 1</li>
            <li><b>Handle</b> Item 2</li>
            <li><b>Handle</b> Item 3</li>
            <li><b>Handle</b> Item 4</li>
        </ul>
        
        <div id="myListClicked">Double-click to get index.</div>
        <div id="myListDragged">Drag and drop to get index.</div>
        
    </body>
</html>

The above is a combination of two pre-existing examples; one on the sample usage of the index method, the other on using sortables. Double-clicking the non-handle part of a list item works correctly.

I have tested this in both the current 'stable' and latest development snapshot.

Not being able to utilize index offsets makes the callback generally useless for my purposes, as my behind-the-scenes AJAX code only requires the ID of the node and the new offset to update the database.

Attachments (0)
Change History (3)

Changed April 21, 2008 09:55PM UTC by rworth comment:1

priority: major → blocker

Changed April 21, 2008 10:14PM UTC by GothAlice comment:2

The effect can be simulated using the following snippit within the update handler:

#!js
var index = $.inArray(ui.item.attr('id'), ui.instance.toArray())

I'm not sure how efficient this is, or if this will work for anything other than the simple test case, but it works. The element seemingly not being a child element of the container is still a problem, though, and this ''is'' a hack.

Changed April 30, 2008 10:18AM UTC by paul comment:3

resolution: → invalid
status: new → closed

Hi there, the fix is really simple, it's not an issue in UI: the index() method cannot accept jQuery sets, and ui.item is a jQuery collection. change ui.item to ui.item[0] and it will work.