JavaScript triggered by html5sortable's sortupdate is being run twice

Question

On an aspx page I have a sortable list like this that is made using this plugin.

<ul id="sortableQueue" class="sortable">
    <li style="cursor: move" data-shotid="1">Shot Name - 1</li>
    <li style="cursor: move" data-shotid="2">Shot Name - 2</li>
    <li style="cursor: move" data-shotid="3">Shot Name - 3</li>
</ul>

Then at the bottom of the page I have code that loads the js for the sortable list and sets up a function called "sortupdate" which is run each time the order of the list changes.

<script src="js/html.sortable.js"></script>
<script>
    $('.sortable').sortable().bind('sortupdate', function (e, ui) {
        alert(ui.oldindex + ' -> ' + ui.item.index());
    });
</script>

Here's where things get bizarre. Upon moving an item from one place to another, such as item 1 to item 2's spot, the alert works as expected, returning "0 -> 1" BUT then another alert box shows up with the exact same "0 -> 1". It seems to me that the Javascript is running twice for some reason, but I've never seen anything like this before, and have no idea what could be causing it.

I need it to run only once, otherwise extremely strange things will happen when I try to store the new order.

Anyone seen a similar issue before, and have some advice? I can't tell if it's a JavaScript problem, an ASP.NET problem, or a html5sortable problem, so I don't even know where to begin.

Answer 1

I just ran into this myself, and I think it's an artifact of the alert. Try removing the alert, and replacing it with a console.log call instead, and view the log messages in the console tab of your browser's inspector.

Just make sure you remove the console.log call when you release ... IE doesn't like it unless there is actually a console. You'll know that this is the problem if the page fails when you try and load it in regular IE, but when you open the console, it succeeds, so you can't find out where the problem was :-(