#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,
Attachments (3)
Change History (23)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
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 12 years ago by
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
comment:4 Changed 12 years ago by
This is an error in IE version 6/7/8. Don't know if also present in IE 5.x.
comment:5 Changed 12 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
We cannot analyze this without a reduced test case.
comment:6 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
Attachment: | offset.zip added |
---|
reproduces the problem with AJAX updates and offset function
comment:8 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
Attachment: | drag-drop-error.zip added |
---|
comment:10 Changed 12 years ago by
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 Changed 12 years ago by
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 follow-up: 13 Changed 12 years ago by
Resolution: | invalid |
---|---|
Status: | closed → reopened |
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 Changed 12 years ago by
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 follow-up: 15 Changed 12 years ago by
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 Changed 12 years ago by
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 12 years ago by
#5722 describes the same issue, and offers a client-only workaround.
comment:17 Changed 12 years ago by
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 12 years ago by
Priority: | blocker → major |
---|
comment:19 Changed 12 years ago by
Milestone: | TBD → 1.8.5 |
---|---|
Resolution: | → fixed |
Status: | reopened → closed |
This should be fixed in 1.8.5.
Please provide a reduced test case.