"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.

Kubis

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 radiant-ocean-4606.herokuapp.com/forms-advanced.html - breaks the select2 when FB is open... – Galbanum

i have the same error and no jQuery loaded on the page :/ – Inkle

Answer 1

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

Doig

thanks, for me this error was due to the conflict between jquery and prototype – Sextain

just for completeness, no conflict mode is activated by adding <script>jQuery.noConflict();</script> right after <script src="jquery.js"></script> – Augustineaugustinian

@Doig <script>jQuery.noConflict();</script> this solved my problem – Slipcase

solved my problem <script>jQuery.noConflict();</script> – Hyacinthie

Wow, this is craziness, but a great solution. Adding the noConflict, then moving my js into the "jQuery(function ($)..." works. Thanks! – Euchologion

Answer 2

After all the Jquery script tag's add

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

to avoid the conflict between Prototype and Jquery.

Roncesvalles

Answer 3

Change the following line

$(document).ready(function() {

To

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

Lith

Answer 4

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>

Bigot

Answer 5

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

Yeager

Answer 6

I know it's been a while, but this may help someone, for me the problem was that i was importing the jquery twice

Westonwestover

Answer 7

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

Rood