Opened 7 years ago

Closed 7 years ago

#15862 closed defect (fixed)

on(DOMNode, ...) fails when Prototype or jQuery included onto page

Reported by: Moonlight Owned by: Kris Zyp
Priority: undecided Milestone: 1.7.5
Component: Events Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

Clicking on the "x" (to close the Dialog pop-up, which is generated by the following code :

<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="-1">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span></span>

JavaScript returns the following errors :

Uncaught TypeError: Object #<klass> has no method 'remove' (Mover.js 8)

   _2.onFirstMove Mover.js:8
   lang.hitch dojo.js:15
   Event.Handler.Class.create.handleEvent prototype.js:6639
   (anonymous function)

Uncaught TypeError: Object #<klass> has no method 'remove' (Mover.js:8)

_2.destroy.h Mover.js:8
_578.forEach dojo.js:15
_2.destroy Mover.js:8
_2.onMouseUp Mover.js:8
lang.hitch dojo.js:15
Event.Handler.Class.create.handleEvent prototype.js:6639
(anonymous function)

Uncaught TypeError: Object #<klass> has no method 'remove' (Mover.js:8)

_2.onFirstMove Mover.js:8
lang.hitch dojo.js:15
Event.Handler.Class.create.handleEvent prototype.js:6639
(anonymous function)

Uncaught TypeError: Cannot call method 'remove' of undefined (Mover.js:8)

_2.onFirstMove Mover.js:8
lang.hitch dojo.js:15
Event.Handler.Class.create.handleEvent prototype.js:6639
(anonymous function)

Attachments (1)

bug_dojo_dialog.html (16.6 KB) - added by Moonlight 7 years ago.
HTML with the error

Download all attachments as: .zip

Change History (16)

comment:1 Changed 7 years ago by bill

Owner: changed from bill to Moonlight
Status: newpending

Closing the Dialogs in our dijit test cases works fine.

Please attach a test case using the "attach file" button. It should be as small as possible to still reproduce the problem, almost always a single HTML file that we can load in the browser and use to reproduce then problem.

Then, give exact instructions on how to reproduce the problem using your attached test file.

The test case is necessary both to confirm that there's a bug, and for us to be able to debug the problem.

Thanks!

Changed 7 years ago by Moonlight

Attachment: bug_dojo_dialog.html added

HTML with the error

comment:2 Changed 7 years ago by Moonlight

Status: pendingnew

Attachment (bug_dojo_dialog.html) added by ticket reporter.

comment:3 Changed 7 years ago by Moonlight

NOTE : I did some more testings, and I think the bug might be a compatibility problem between prototype.js and dojo. If you look at the .html I attached, it is loading only "prototype" (1st) and "dojo" (2sd) as scripts. If I remove the "prototype" script call, it works fine.

To reproduce:

  • Open the bug_dojo_dialog.html file
  • Click on the link Display in (I accept the Terms & Conditions (Display))
  • Click on the "X" or the "Close" buttons

I wasn't able to do the test case as requested.

comment:4 Changed 7 years ago by bill

Component: DijitEvents
Description: modified (diff)
Owner: changed from Moonlight to Kris Zyp
Status: newassigned
Summary: Closing Dialog Box returns Uncaught TypeError: Object #<klass> has no method 'remove''on(document, ...) fails when Prototype included onto page

You are right that it's a dojo-Prototype compatibility issues; it's because Prototype adds an on() method to DOMNodes and that confuses dojo/on.js.

Specifically, in your test case:

  • Dialog is a dojo/dnd/Moveable, so a dojo/dnd/Mover is created, and that calls on(document, touch.move, lang.hitch(this, "onFirstMove"))
  • Since on.js sees a document.on() method, it delegates to that method. However, that method doesn't return a handle like on() expects.
  • later on, dojo/dnd/Moveable tries to call handle.remove(), but there's no such method.

In other words, the test case could be simplified to:

... include prototype ...
on(document, "mousemove", callback).remove()

I suppose that to workaround this we could skip checking for a target.on() method if the target is a DOMNode. Will leave it to Kris though if he wants to do that or not.

The method prototype adds looks like:

> document.on
function () {
      var a = update([this], arguments);
      return __method.apply(null, a);
    }

comment:5 Changed 7 years ago by bill

Summary: on(document, ...) fails when Prototype included onto pageon(DOMNode, ...) fails when Prototype included onto page

comment:6 Changed 7 years ago by isengrim

Hi, Just for record - it's not only the "X" button problem. There is also an issue with moving the dialog when the prototype is initiated.

Could you please let me know if there is a way to hardcode a fix for this?

Regards, isengrim

comment:7 Changed 7 years ago by Eric Durocher

If you are really, really stuck, you can try this ugly hack workaround:

Event.Handler.prototype.remove = function(){ this.stop(); };

It does seem to fix the attached sample (I can click the close icon and move the dialog without errors), but note that this should be only a temporary workaround, you may still face other incompatibilities, it does not address the origin of the problem, use at your own risks, etc (ok enough disclaimers, you get the idea). Make sure you remove this hack if/when the fix suggested above is implemented.

comment:8 Changed 7 years ago by bill

Summary: on(DOMNode, ...) fails when Prototype included onto pageon(DOMNode, ...) fails when Prototype or jQuery included onto page

comment:9 Changed 7 years ago by bill

#16004 is a duplicate of this ticket.

comment:10 Changed 7 years ago by Kris Zyp

In [30987]:

Don't use .on() method on targets that are DOM nodes so we don't use incompatible jQuery or Prototype version, refs #15862 !strict

comment:11 Changed 7 years ago by Kris Zyp

Can you verify the fix? I can't seem to get the test case to load.

comment:12 Changed 7 years ago by Brian Arnold

I've ran into this issue in the past, and I can verify that your posted patch for r30987 is sufficient. I'm also backporting it to 1.8 and 1.7 now.

comment:13 Changed 7 years ago by Brian Arnold

In [31025]:

Backport of r30987 to 1.8 branch, refs #15862 !strict

comment:14 Changed 7 years ago by Brian Arnold

In [31026]:

Backport of r30987 to 1.7 branch, refs #15862 !strict

comment:15 Changed 7 years ago by bill

Milestone: tbd1.7.5
Resolution: fixed
Status: assignedclosed

Looks like this should be closed as fixed.

Note: See TracTickets for help on using tickets.