#4550 closed bug (fixed)

Opened May 26, 2009 08:59AM UTC

Closed August 21, 2009 02:14PM UTC

Last modified March 11, 2011 03:30PM UTC

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:
Blocked by: Blocking:
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.

Attachments (0)
Change History (10)

Changed June 01, 2009 03:30PM UTC by jzaefferer comment:1

component: ui.core → ui.droppable
milestone: TBD → 1.8

Changed August 05, 2009 04:40PM UTC by scottgonzalez comment:2

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.

Changed August 05, 2009 04:40PM UTC by scottgonzalez comment:3

priority: blocker → critical

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

Changed August 21, 2009 02:14PM UTC by paul comment:4

resolution: → fixed
status: new → closed

Fixed in r3103.

Changed August 27, 2009 08:33PM UTC by martinkeimel comment:5

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;

2. 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.

Changed November 09, 2009 08:19AM UTC by graemeworthy comment:6

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'

Changed February 03, 2010 03:48PM UTC by m4olivei comment:7

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

Changed April 12, 2010 07:21PM UTC by zeta comment:8

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.

Changed January 20, 2011 05:46PM UTC by mrgccc3 comment:9

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.

Changed March 11, 2011 03:30PM UTC by ebbergemann comment:10

_comment0: 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. \ \ → 1299857477848732

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.