draggables and droppables stop to work after AJAX refresh on IE

Please provide a reduced test case.

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

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

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

We cannot analyze this without a reduced test case.

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

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.

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.

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

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

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.

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.

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.

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

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

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

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

This should be fixed in 1.8.5.

Thanks for fixing this!

Regards,

Ernesto