Skip to main content

Search and Top Navigation

#5374 closed bug (fixed)

Opened March 18, 2010 12:27PM UTC

Closed October 20, 2010 03:41AM UTC

Last modified October 20, 2010 06:47AM UTC

draggables and droppables stop to work after AJAX refresh on IE

Reported by: reiern70 Owned by:
Priority: major Milestone: 1.8.5
Component: ui.droppable Version: 1.8rc3
Keywords: AJAX IE drag drop Cc:
Blocked by: Blocking:
Description

Hi,

I'm using jquery to build some Wicket components and I have found problems with draggables and droppables after AJAX refresh. Once I refresh some part of the screen containing droppables, and draggables, draggables stop to work for all versions of IE. With draggables only this problem does not appear.

The problem appear to be on line

5942 var box = elem.getBoundingClientRect()

of jquery-1.4.2.js.

This problem does not appear on FF, Chrome or Opera.

This seems to be related to [1] and I have added a note there (see [1] at the end). I have also asked on Wicket user list and another developer found the same problem and the solution he used was to patch his local jquery. Have someone else found a similar issue? I could provide a minimal Wicket application exhibiting this behavior (with explanations on how to get it working) but I do not know how to build a simple HTML page showing it. Would that be enough for a jquery developer to take a look at this issue?

Best regards,

Ernesto

References,

1-http://dev.jquery.com/ticket/4996

Attachments (3)
  • drag-drop-error.zip (62.9 KB) - added by reiern70 March 25, 2010 02:15PM UTC.
  • offset.zip (46.2 KB) - added by reiern70 March 24, 2010 10:48AM UTC.

    reproduces the problem with AJAX updates and offset function

  • testdragDrop.zip (197.4 KB) - added by reiern70 March 22, 2010 10:28AM UTC.

    this shows the problem

Change History (20)

Changed March 18, 2010 09:38PM UTC by scottgonzalez comment:1

Please provide a reduced test case.

Changed March 19, 2010 12:34PM UTC by reiern70 comment:2

Hi,

I can´t exactly reproduce the issue without using AJAX. But I still manage to get a JavaScript error on IE. I have tried to reproduce AJAX behavior by replacing div contents and recreating the draggable droppables on the ondrop event of the droppable. I´ll try to give it a second go today in the evening and see If can exactly reproduce the behavior I´m observing while using AJAX: in that case draggables are no longer usable.

Thanks you very much for taking some time to look into this issue.

Best,

Ernesto

Changed March 20, 2010 08:16PM UTC by reiern70 comment:3

Hi,

I haven't managed to get a simple page working but I have created a very simple Wicket project illustrating the issue. The code of this small project can be found at [1]. Detailed instructions on how to use maven to start such a project can be found at [2]. In summary.

1-Unzip the folder somewhere

2-Open a console. CD to folder dragdrop.

3-Type mvn eclipse:eclipse -DdownloadSources=true.

4-Type mvn jetty:run and browse at http://localhost:8080/dragdrop/. You will see something like [3].

I have investigated a bit more and the problem seem to be the same as [4]. If I replace line 5942

var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement,

with

var box;

try {

box = elem.getBoundingClientRect();

} catch (e) {

box = {top : 0, left: 0, right: 0, bottom: 0};

}

var doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement,

Then drag-drop works as expected after AJAX refresh. Can someone please take a look to this?

Thanks in advance,

Ernesto

1-http://wijqgrid.googlecode.com/svn/wiki/dragdrop.zip

2-http://wicket.apache.org/quickstart.html

3-http://wijqgrid.googlecode.com/svn/wiki/error1.jpg

4-http://dev.jquery.com/ticket/4996

Changed March 20, 2010 08:48PM UTC by lindner@visionet.de comment:4

This is an error in IE version 6/7/8. Don't know if also present in IE 5.x.

Changed March 20, 2010 10:17PM UTC by scottgonzalez comment:5

resolution: → invalid
status: newclosed

We cannot analyze this without a reduced test case.

Changed March 22, 2010 12:45PM UTC by reiern70 comment:6

Hi,

I have attached a new test case (testdragDrop.zip) that reproduces the issue using Wicket´s JavaScript machinery in combination with jQuery drag-drop. I´ll also file a JIRA issues at Wicket site just in case the problem is on their "side of the fence".

Best regards,

Ernesto

Changed March 24, 2010 10:48AM UTC by reiern70 comment:7

Hi,

I managed to reproduce this without Wicket. It seems it is the same issue as

http://dev.jquery.com/ticket/4996

See attachment offset.zip.

Changed March 25, 2010 01:43PM UTC by rdworth comment:8

The attached offset.zip does not use jQuery UI, it seems only to demonstrate the issue with http://dev.jquery.com/ticket/4996. If there is one, please create a minimal test case (no other framework code, no Ajax) using jQuery and jQuery UI to demonstrate where the issue is in jQuery UI.

Changed March 25, 2010 01:58PM UTC by reiern70 comment:9

Hi Richard,

No other framework code? Those that mean I can't use jquery in combination with other frameworks and get support? Test case [1] only uses static HTML and Wicket AJAX JS to replace a div with a new one (to simulate AJAX). I haven't managed to get the same error only using jquery's code: although I get a different error also for IE. Is what you want?

Ernesto

References,

1-http://dev.jqueryui.com/attachment/ticket/5374/testdragDrop.zip

Changed March 25, 2010 02:21PM UTC by reiern70 comment:10

I cant't reproduce the same but I can produce ann error using jquery only. See

http://dev.jqueryui.com/attachment/ticket/5374/drag-drop-error.zip

Changed May 20, 2010 03:14PM UTC by tempMentive comment:11

I am experiencing the same issue but without AJAX. I have three columns with draggables in two columns and droppables in one. Re-rendering the draggable columns works fine, but once the droppables are rendered a 2nd time, the draggables begin experiencing the bug explained above and no longer function. I tried using the destroy options with no luck.

This only happens in IE (tested on 7)

I tried the bug fix provided above and the system now works under IE7. Thanks a LOT! Hopefully this gets patched in the next version.

Changed June 15, 2010 04:53PM UTC by erangalp comment:12

resolution: invalid
status: closedreopened

I'm hoping this issue can be re-opened and resolved, as I'm experiencing the same problem. The core of the problem seems to be when no droppables exist (after some changes to the DOM, programmatically or via AJAX), IE (7 & 8) throw the getBoundingClientRect() error. If you could introduce a check to see if droppables exist before the error is thrown, it should solve this issue.

Changed June 15, 2010 07:03PM UTC by reiern70 comment:13

Yes the issue is still there:-( and it has been there for a long time. I´m experiencing it when a page contains droppables and dragables and they are replaced via AJAX. I´m using it for a creating a grid component whose columns can be reordered via drag/drop and this works well for any browser I have tested except IE (versions 6,7 and 8).

Best,

Ernesto

References

1-http://code.google.com/p/wiquery-plugins/source/browse/#svn/trunk/wiquery-plugins/antila-grid

Replying to [comment:12 erangalp]:

I'm hoping this issue can be re-opened and resolved, as I'm experiencing the same problem. The core of the problem seems to be when no droppables exist (after some changes to the DOM, programmatically or via AJAX), IE (7 & 8) throw the getBoundingClientRect() error. If you could introduce a check to see if droppables exist before the error is thrown, it should solve this issue.

Changed June 15, 2010 08:05PM UTC by erangalp comment:14

For now, I've managed a temporary fix - I'm wrapping the problematic area with a try-catch block. It suppresses the error and the drag-and-drop seems to work.

in jQuery.fn.offset(), line 5942 in jquery-1.4.2.js:

try {
	var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement,
	clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0,
	top  = box.top  + (self.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop ) - clientTop,
	left = box.left + (self.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft) - clientLeft;
	return { top: top, left: left };
} catch(e) {
			
}

Changed June 16, 2010 04:28AM UTC by reiern70 comment:15

I haven´t considered that as an option: how could you be sure this doesn´t brake any other functionality on other jquery UI plugins or any third party plugin you are using on your application? When I reported this problem I found it reported like 7 months before (ticket 4996)... I´m just starting to wonder what would we need to get this fixed the right way: by the developer of jquery UI and been part of an official release.

Ernesto

Replying to [comment:14 erangalp]:

For now, I've managed a temporary fix - I'm wrapping the problematic area with a try-catch block. It suppresses the error and the drag-and-drop seems to work. in jQuery.fn.offset(), line 5942 in jquery-1.4.2.js:
> try {
> 	var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement,
> 	clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0,
> 	top  = box.top  + (self.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop ) - clientTop,
> 	left = box.left + (self.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft) - clientLeft;
> 	return { top: top, left: left };
> } catch(e) {
> 			
> }
> 

Changed June 16, 2010 09:09PM UTC by vigo comment:16

#5722 describes the same issue, and offers a client-only workaround.

Changed June 17, 2010 04:35AM UTC by reiern70 comment:17

Hi,

Described workaround (calling destroy) does not work in my use case. I´m creating a grid that can be used in many complex situations and there is no easy way to track all the droppables a user could create and destroy them between AJAX replacements. I´have already abandoned the use of other D&D libraries because a similar problem (but I know other libraries, e.g. YUI, that offer usable workaround for such a situation). Right now I need to use this component in combination with jquery...:-( I just disabled that feature for IE, so most of the user will simply miss it.

Thanks anyway!

Ernesto

Changed October 19, 2010 03:21PM UTC by scottgonzalez comment:18

priority: blockermajor

Changed October 20, 2010 03:41AM UTC by scottgonzalez comment:19

milestone: TBD1.8.5
resolution: → fixed
status: reopenedclosed

This should be fixed in 1.8.5.

Changed October 20, 2010 06:47AM UTC by reiern70 comment:20

Thanks for fixing this!

Regards,

Ernesto