Search and Top Navigation
#2730 closed bug (notabug)
Opened April 21, 2008 09:38PM UTC
Closed April 30, 2008 10:18AM UTC
Unable to retreive index of sortable element during update event.
Reported by: | GothAlice | Owned by: | paul |
---|---|---|---|
Priority: | blocker | Milestone: | |
Component: | ui.core | 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 comment:1
priority: | major → blocker |
---|
Changed April 21, 2008 10:14PM UTC by 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 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.