Ticket #4550 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

Remove ui.draggable immediately after the drop callback still raises an error in IE

Reported by: sam Owned by:
Priority: critical Milestone: 1.8
Component: ui.droppable Version: 1.7.1
Keywords: Cc:
Blocking: Blocked by:

Description

A Similar error was reported (Ticket #4087) which seemed to resolve a problem in both Firefox and IE - however there is still an error occurring in IE. Firefox from what I can tell is happy.

jquery.1.3.2 jquery.ui.1.7.1 IE 7 (Complains) Firefox 3 (Happy)

Error can be created using:

$(document).ready(function() {

  function intDraggables() {
      $(".drag").draggable();
  }

  $(".drop").droppable({
      drop: function(event, ui) {	
          ui.draggable.remove();
      }
  });
});

Resulting error (in IE) reads:

'data(...).options' is null or not an object.

From minified code (ui.1.7.1)

   stop:function(b,c){var d=a(this).data("draggable").options;

Marked this ticket as blocker as I can find no other way to remove a draggable during drop without throwing an error in IE.

Change History

comment:1 Changed 5 years ago by joern.zaefferer

  • Component changed from ui.core to ui.droppable
  • Milestone changed from TBD to 1.8

comment:2 Changed 5 years ago by scott.gonzalez

Passing the plugin instance to the functions that $.ui.plugin.call executes may solve the problem. Alternatively, setting the context of those functions to the plugin instance instead of the element should solve the problem, but would require larger changes to every use of $.ui.plugin.

comment:3 Changed 5 years ago by scott.gonzalez

  • Priority changed from blocker to critical

Using setTimeout() for the removal should work around this.

comment:4 Changed 5 years ago by paul

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in r3103.

comment:5 Changed 5 years ago by martinkeimel

Hi, I downloaded the mentioned version but the error is still occurring. What I did for solving this is the following:

  1. Comment the lines added in the bug fix:

if the original element is removed, don't bother to continue

162 if(!this.element[0]
!this.element[0].parentNode)

163 return false;

  1. Replace the lines 598-601, which used to contain:

stop: function(event, ui) {

var o = $(this).data('draggable').options;

if (o._cursor) $('body').css("cursor", o._cursor);

}

for

stop: function(event, ui) {

if ($(this).data('draggable')) {

var o = $(this).data('draggable').options;

if (o._cursor) $('body').css("cursor", o._cursor);

}

}

Is that alright? Hope this helps. Greetings, Martin K.

comment:7 Changed 5 years ago by graemeworthy

I was having the same issue. I am using 1.7.2.

Martin K's fix worked for me. However, I had to patch jquery ui in two places, the one he recomended, as well as for 'opacity'

comment:8 Changed 4 years ago by m4olivei

I was also having this issue. I am using 1.7 and applying martinkeimel's fix worked for me as well.

graemeworthy, what was the other patch that you needed? I'd like to see if it will apply to me in my application. Right now I'm not seeing any furthur problems after applying martinkeimel's fix.

Thanks, ~Matt

comment:9 Changed 4 years ago by zeta

This bug happens because when you stop dragging the item, it tries to access the item's draggable properties/options, but the original item (the one been dragged) cannot be found. That's what happened to me.

To fix this in an upper level (your js code), you could use the setTimeout(function() { ... }, 1);

Otherwise, you could follow the steps posted by Martin K. But, I had to patch it in 3 different places. The place where Martin K specified, then the 'opacity' and 'zIndex'. To find these last 2 places just do a search in the file for:

stop: function(event, ui) {

var o = $(this).data('draggable').options;

if (o._cursor) $('body').css("cursor", o._cursor);

}

and you should be able to see them.

comment:10 Changed 4 years ago by mrgccc3

Martin K, thanks that saved my life, testing for it's existence did the trick.

I've tested it in Chrome, IE, and Firefox and all work wonderfully. Granted only IE was the culprit prior.

comment:11 Changed 3 years ago by ebbergemann

I just now saw this same issue occurring with me while using 1.8.10. It looks like this issue may crop up again from time to time. Below is a very simple workaround that I did:

I set it up to not do the remove on the "drop" function of the droppable but had it occur on the "stop" function of the draggable.

/*drop event on the droppable*/

ui.draggable.attr("removeme", "true");

/*stop event on the draggable*/

if ($(this).attr("removeme") == "true") {

$(this).remove();

}

I have tested this with IE8 and also FF 3.6.

With this change, if you have revert set to true on the draggable then it will animate the revert before removing the element.

Last edited 3 years ago by ebbergemann (previous) (diff)
Note: See TracTickets for help on using tickets.