CODEWITHSUNDEEP
jqueryinternet-explorerjquery-ui-sortable
user931392
user931392

Reputation: 375

sortable jquery list not working in IE 9.0 after hiding sibling div node

Here's the code I'm trying to fix: http://jsfiddle.net/fabKu/.

Everything works just fine until you hide ( use the buttons ) the second div. The code works in every other major browser, only IE causes trouble.

I've no idea why is this happening, so I'm asking for a little help.

EDIT:

Here's a detailed explanation of the problem. It`s all about indexes.

Environment:

Browser: IE 9.0

Steps to reproduce:

  1. Hide the second div. ( click the first button )
  2. Try to move the 15th item ( for example ) on position 7 ( for example ).

Current behavior:

The index of the 15th item is change to "02" ( during drag ) and when you place it in the new position the ordering is mixed up.

Expected behavior

Reload the page and do the same thing but without hiding the second div.

Workaround

One possible workaround is to place a new div between the first and the second one. IE seems to be having problems with the reindexing if the node after the div containing the "ol" node have "display" set to "none". ( seems it does not matter if the node is a div or something else )

Upvotes: 1

Views: 259

Answers (1)

Hogan
Hogan

Reputation: 70538

I have verified the following works in IE7 with this fiddle:

http://jsfiddle.net/Agwp2/1/

Try this:

                $('form input:eq(0)').click( function()
                {
                    $('#divToHide').hide();
                });

                $('form input:eq(1)').click( function()
                {
                    $('#divToHide').show();
                });

If that works in IE then the problem is with incompatible CSS.

Upvotes: 1

Related Questions