Ticket #7538 (closed bug: fixed)

Opened 3 years ago

Last modified 15 months ago

Draggable: IE7 crashes when draggable is inside of tabs

Reported by: JAAulde Owned by:
Priority: minor Milestone: 1.9.1
Component: ui.draggable Version: 1.8.14
Keywords: Cc:
Blocking: Blocked by:

Description

  • jQuery 1.6.1, 1.6.2
  • jQuery UI 1.8.14
  • Internet Explorer 7
  • Windows XP

Reduced test case:  http://jsfiddle.net/JAAulde/5Cujz/

When using IE7 (only in IE7--no other browser, not even IE8 in 7 compat mode) on a page with draggable (UI DnD) elements inside of a tab (UI tabs), the first drag of any particular draggable is fine. Any subsequent drag of the same element, however, causes IE to crash.

We traced it all the way down through the creation of the clone helper and into the call to removeAttr() which is made against the clone for stripping off the ID. Inside of removeAttr(), the check for jQuery.support.getSetAttribute comes up false, so jQuery attempts to clear the attribute and then retrieve it from the DOM to pass it to elem.removeAttributeNode(). That call to elem.removeAttributeNode is where IE crashes.

Change History

comment:1 Changed 3 years ago by k_borchers

Your issue is that jQuery UI 1.8.14 does not support jQuery 1.6.1 or 1.6.2 yet. This is good to know though for when 1.6.x is supported.

comment:2 Changed 3 years ago by scott.gonzalez

  • Keywords 1.6-support added

comment:3 Changed 3 years ago by p.scheit

I can confirm the issue, but it happens also on setting the attribut with the attr() function. (4th - 5th call)

Thank you for pointing it out. Degrading to jquery 1.5.1 is a good workaround

comment:4 Changed 3 years ago by JAAulde

I decided to stick with jQuery 1.6.2 and the following monkey patch:

( function( global )
{
  var jQuery,
      origRemoveAttr;

  if( global.jQuery )
  {
    jQuery = global.jQuery;
    origRemoveAttr = jQuery.removeAttr;

    jQuery.removeAttr = function( elem, name )
    {
      if( ! jQuery.support.getSetAttribute && ( '' + name ).toUpperCase() === 'ID' )
      {
        elem.removeAttribute( name );
      }
      else
      {
        origRemoveAttr.apply( jQuery, arguments );
      }
    };
  }
}( window ) );

comment:5 Changed 3 years ago by scott.gonzalez

comment:6 Changed 3 years ago by scott.gonzalez

  • Status changed from new to open

comment:7 Changed 19 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:8 Changed 18 months ago by mikesherov

  • Summary changed from IE7 crashes when draggable is inside of tabs to Draggable: IE7 crashes when draggable is inside of tabs

comment:9 follow-ups: ↓ 11 ↓ 11 Changed 15 months ago by nikomakela

I have excatly the same problem. First drag works and second doesn't. Also the problem only exist when I'm using IE7. I also had my draggables inside a tab, but removing tabs didn't fix the problem.

I'm using draggable and droppable to move blocks of elements from a div to another. When moved, I want that a clone (ui.draggable.clone(false, false)) of dragged element returns to the original spot. When I start dragging the element again (the original one, not the clone), IE7 crashes. Removing the cloning part of the code fixes the problem.

I've tested that IE8, IE9 and IE10 works ok, as well as the newest Chrome and Firefox. Only IE7 doesn't.

  • Browser: IE 7
  • jQuery: jquery-1.7.2.min
  • jQuery UI: jquery-ui-1.8.21

comment:10 Changed 15 months ago by scott.gonzalez

  • Keywords 1.6-support removed
  • Status changed from open to closed
  • Resolution set to fixed
  • Milestone changed from 2.0.0 to 1.9.1

Please upgrade to the latest versions of jQuery and jQuery UI.

comment:11 in reply to: ↑ 9 Changed 15 months ago by nikomakela

Replying to nikomakela:

I have excatly the same problem. First drag works and second doesn't. Also the problem only exist when I'm using IE7. I also had my draggables inside a tab, but removing tabs didn't fix the problem.

I'm using draggable and droppable to move blocks of elements from a div to another. When moved, I want that a clone (ui.draggable.clone(false, false)) of dragged element returns to the original spot. When I start dragging the element again (the original one, not the clone), IE7 crashes. Removing the cloning part of the code fixes the problem.

I've tested that IE8, IE9 and IE10 works ok, as well as the newest Chrome and Firefox. Only IE7 doesn't.

  • Browser: IE 7
  • jQuery: jquery-1.7.2.min
  • jQuery UI: jquery-ui-1.8.21

Okay, mine script is working now. I was adding a boolean to ui.draggable.data() and when I read it, I did it like this:

	if (ui.draggable.data().createdWithBuilder == true){ ...

The dot-notation worked for every browser except IE7. When I read the value like I'm doing in following code, everything is working ok.

	if (ui.draggable.data("createdWithBuilder") == true){ ...

comment:11 in reply to: ↑ 9 Changed 15 months ago by nikomakela

Replying to nikomakela:

I have excatly the same problem. First drag works and second doesn't. Also the problem only exist when I'm using IE7. I also had my draggables inside a tab, but removing tabs didn't fix the problem.

I'm using draggable and droppable to move blocks of elements from a div to another. When moved, I want that a clone (ui.draggable.clone(false, false)) of dragged element returns to the original spot. When I start dragging the element again (the original one, not the clone), IE7 crashes. Removing the cloning part of the code fixes the problem.

I've tested that IE8, IE9 and IE10 works ok, as well as the newest Chrome and Firefox. Only IE7 doesn't.

  • Browser: IE 7
  • jQuery: jquery-1.7.2.min
  • jQuery UI: jquery-ui-1.8.21

Okay, mine script is working now. I was adding a boolean to ui.draggable.data() and when I read it, I did it like this:

	if (ui.draggable.data().createdWithBuilder == true){ ...

The dot-notation worked for every browser except IE7. When I read the value like I'm doing in following code, everything is working ok.

	if (ui.draggable.data("createdWithBuilder") == true){ ...
Note: See TracTickets for help on using tickets.