draggables and droppables stop to work after AJAX refresh on IE

[reiern70]

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

[Scott González]

Please provide a reduced test case.

[reiern70]

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

[reiern70]

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

[lindner@…]

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

[Scott González]

We cannot analyze this without a reduced test case.

[reiern70]

this shows the problem

[reiern70]

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

[reiern70]

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.

[reiern70]

reproduces the problem with AJAX updates and offset function

[rdworth]

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.

[reiern70]

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

[reiern70]

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

[tempMentive]

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.

[Eran Galperin]

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.

[reiern70]

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

[Eran Galperin]

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) {
			
}

[reiern70]

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 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) {
			
}

[vigo]

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

[reiern70]

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

[Scott González]

This should be fixed in 1.8.5.

[reiern70]

Thanks for fixing this!

Regards,

Ernesto