Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#5374 closed bug (fixed)

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)

testdragDrop.zip (197.4 KB) - added by reiern70 9 years ago.
this shows the problem
offset.zip (46.2 KB) - added by reiern70 9 years ago.
reproduces the problem with AJAX updates and offset function
drag-drop-error.zip (62.9 KB) - added by reiern70 9 years ago.

Download all attachments as: .zip

Change History (23)

comment:1 Changed 9 years ago by Scott González

Please provide a reduced test case.

comment:2 Changed 9 years ago by 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

comment:3 Changed 9 years ago by 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

comment:4 Changed 9 years ago by lindner@…

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

comment:5 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

We cannot analyze this without a reduced test case.

Changed 9 years ago by reiern70

Attachment: testdragDrop.zip added

this shows the problem

comment:6 Changed 9 years ago by 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

comment:7 Changed 9 years ago by 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.

Changed 9 years ago by reiern70

Attachment: offset.zip added

reproduces the problem with AJAX updates and offset function

comment:8 Changed 9 years ago by 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.

comment:9 Changed 9 years ago by 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

Changed 9 years ago by reiern70

Attachment: drag-drop-error.zip added

comment:10 Changed 9 years ago by 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

comment:11 in reply to:  description Changed 9 years ago by 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.

comment:12 Changed 9 years ago by Eran Galperin

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.

comment:13 in reply to:  12 Changed 9 years ago by 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.

comment:14 Changed 9 years ago by 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) {
			
}

comment:15 in reply to:  14 Changed 9 years ago by 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) {
			
}

comment:16 Changed 9 years ago by vigo

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

comment:17 Changed 9 years ago by 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

comment:18 Changed 9 years ago by Scott González

Priority: blockermajor

comment:19 Changed 9 years ago by Scott González

Milestone: TBD1.8.5
Resolution: fixed
Status: reopenedclosed

This should be fixed in 1.8.5.

comment:20 Changed 9 years ago by reiern70

Thanks for fixing this!

Regards,

Ernesto

Note: See TracTickets for help on using tickets.