"element.dispatchEvent is not a function" js error caught in firebug of FF3.0

Question

i am getting the following error while loading my index page in FF3.0. Sorry, i am unable to paste the script here as it is 2030 lines of code.

element.dispatchEvent is not a function

On expansion it gives me below things,

fire()()prototype.js?1 (line 3972)

_methodized()()prototype.js?1 (line 246)

fireContentLoadedEvent()prototype.js?1 (line 4006)

[Break on this error] element.dispatchEvent(event);

element.dispatchEvent(event); is in line 3972 of prototype.js. I am including prototype.js along with 10s of other js files in my index page.

Has anybody came across this kind of error? Please somebody explain me why this error is showing up.

I've just had this problem with a select2 in jquery using the wrapbootsrap pixel-admin theme. It can be reproduced in firebug on the demo site via http://radiant-ocean-4606.herokuapp.com/forms-advanced.html - breaks the select2 when FB is open... — Tim Ogilvy, May 11 '14 at 16:06

score 121 · Answer 1 · edited May 13 '15 at 16:41

121

are you using jquery and prototype on the same page by any chance?

If so, use jquery noConflict mode, otherwise you are overwriting prototypes $ function.

noConflict mode is activated by doing the following:

<script src="jquery.js"></script>
<script>jQuery.noConflict();</script>

Note: by doing this, the dollar sign variable no longer represents the jQuery object. To keep from rewriting all your jQuery code, you can use this little trick to create a dollar sign scope for jQuery:

jQuery(function ($) {
    // The dollar sign will equal jQuery in this scope
});

// Out here, the dollar sign still equals Prototype

edited May 13 '15 at 16:41

Ryan Wheale

26,022
8
76
96

answered Jul 16 '09 at 02:50

1

thanks, for me this error was due to the conflict between jquery and prototype – Ross Mar 14 '12 at 04:49
11

just for completeness, no conflict mode is activated by adding `` right after `` – Jules Colle Feb 13 '13 at 08:35
1

@Davo this solved my problem – Mukesh Apr 01 '14 at 11:26
solved my problem – Vinicius Cardoso Feb 28 '20 at 07:09
Wow, this is craziness, but a great solution. Adding the noConflict, then moving my js into the "jQuery(function ($)..." works. Thanks! – Woodchuck Dec 04 '20 at 20:44

score 11 · Answer 2 · answered Aug 20 '13 at 19:58

11

After all the Jquery script tag's add

<script>jQuery.noConflict();</script>

to avoid the conflict between Prototype and Jquery.

answered Aug 20 '13 at 19:58

King Linux

357
3
11

score 5 · Answer 3 · answered Nov 22 '17 at 07:28

5

Change the following line

$(document).ready(function() {

To

jQuery.noConflict();
jQuery(document).ready(function($) {

answered Nov 22 '17 at 07:28

Kinjal Pathak

371
2
9

score 1 · Answer 4 · edited Dec 23 '15 at 10:29

1

You have to add

<script>jQuery.noConflict();</script>

after

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

edited Dec 23 '15 at 10:29

Musakkhir Sayyed

7,012
13
42
65

answered Feb 22 '13 at 07:30

Mufrah

534
7
22

score 0 · Answer 5 · answered Jul 03 '22 at 20:31

It sounds dumb, but BY ACCIDENT or distration you added jquery.js AGAIN below prototype in your code! For instance... a Ctrl+V...

<script ... src="jquery.js"></script>
<script ... > jQuery.noConflict(); </script>
<script ... src="...prototype.js"></script>    /* Fine up to here */
...
<!-- ( code ....) -->
...
...
<script ... src="jquery.js"></script>//<-- Devil: already added

score -1 · Answer 6 · answered Jun 17 '16 at 22:11

-1

check for this by calling the library jquery after the noconflict.js or that this calling more than once jquery library after the noconflict.js

answered Jun 17 '16 at 22:11

Julian Sanchez

1

"element.dispatchEvent is not a function" js error caught in firebug of FF3.0

6 Answers6

Linked