JQuery Not Working With FireFox

For those of you that follow my blog, or know me you will know that I am mainly a WPF/WCF kind of guy, but I Do love ASP MVC, and thought of a tool that I wanted to use, and thought it would be best served as a web based app, so without further ado I set about getting stuck into some ASP MVC and JQuery.

All was going beautifully, my JQuery was coming along leaps and bounds, and was working in Internet Explorer/Firefox/Chrome, and then I changed something.

Suddenly JQuery stopped working entirely in Firefox, despite the fact that the Firebug FireFox addin reported no errors at all, and JQuery worked just fine in Internet Explorer and Chrome. This really hacked me off, and I annoyed my web developer colleague to death on this, and still nothing.

So I messed around for a while and worked out that to my surprise Firefox is far more finickity about how you declare you Javascript imports.

I was doing this

<script src="/Scripts/jquery-1.4.2.min.js" type="text/jscript"/>

Which as I say worked fine in IE/Chrome, but did not in Firefox, but alas no warnings either. After some Googling, I found a post on StackOverflow, that said for Firefox to work you must conform to the correct XHTML schema definition which means you must declare the script import with a correct end tag, like this:

<script src="/Scripts/jquery-1.4.2.min.js" type="text/jscript"></script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }But still no banana in Firefox…hot damn what is going on, still all was fine in IE and Chrome most peculiar.

Turns out the MIME time is all so very important for Firefox, you need to declare the import as follows, and all is then good:

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

I found this post to be pretty useful in determining what MIME types are supported by the various browsers:

http://krijnhoetmer.nl/stuff/javascript/mime-types/

Here is the relevant parts

text/javascript

Opera 7.54+
IE 5+
Firefox 1.0.7+
Safari 2.0.3+
iCab 3 Beta 394
Camino 2006021400

text/jscript

Opera 7.54+
IE 5+
Safari 2.0.3+

Ok its probably an old post, but put me on the right track.

Hope this post and the one above I linked to helps you not get stung like I did.
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Advertisements

19 thoughts on “JQuery Not Working With FireFox

  1. Damien says:

    Thanks Sacha for this. It will certainly save me some time if I come across this problem. It really looks like crazy stuff…

  2. Andrei Rinea says:

    As far as I remembered IE did **NOT** support the script self-closed tag..

  3. Martin says:

    Well to be true using jscript was stupid. It is only the name of the MS implementation…

  4. Tudor says:

    It is obvious that it does not work in other browsers – JScript is just that name of the Microsoft proprietary implementation of ECMAScript..
    For any other browser, the language is JavaScript.

  5. sacha says:

    Damien

    Yeah hope it helps

    Martin

    Like I say I aint a web man, perhaps it shows I guess. Strange that it worked in Chrome though. But yeah fair enough, my stupid mistake, shows even MVPs are human.

  6. Ghassan says:

    Sacha
    I don’t think Martin was talking about you when he said stupid. I think he meant Microsoft should not use the name jscript, and instead they can use the same what everybody use “javascript”

  7. David Clarke says:

    Not so strange, Chrome is based on WebKit which is the engine of Safari so if it works in Safari it might be reasonable to expect it to work in Chrome. I’m not sure how you ended up with “jscript” in your declaration but I’m inclined to agree with Martin, i.e. in VS2010, which I assume you’re using, if you start typing the “script type=” tag, Visual Studio will offer “text/javascript” ahead of “text/jscript”.

  8. Georg Begerow says:

    I ran so often in the error with the selfclosing javascript, but always on IE. With IE it depends on doctype and Browserversion wether or not this will lead to a problem. So I suggest never ever use script tag without an endtag.

  9. Navnath Kale says:

    Good.. But I must say after reading this blog that you still needs to learn lots of basics related to HTML becoz thats the first thing we learned when started playing with HTML

  10. Siderite says:

    Happened to me too. What a debugging nightmare. Also watch out of atomic script tags like . Doesn’t work.

  11. Siderite says:

    … like <script src=”something.js” />

  12. Chris says:

    A great help! Thanks!

  13. Werner Donné says:

    What the blog says is wrong. Self-closing elements are an XML feature and XHTML is an XML language. If FireFox insists on having closing tags for the script element then it is interpreting XHTML as HTML, which is wrong.

  14. TiBoReR says:

    I was using something like to be sure that rocket loader from Cloudflare will not try to load that script async. It was working really well in IE but in Firefox and Chrome, the javascript wasn’t working at all. I removed the data-cfasync=”false” part and it is now working in all browsers. Thanks for that post, it helped me to find it !

  15. TiBoReR says:

    hummm.. like <script type="text/javascript" data-cfasync=”false” src="http://my.host/file.js&quot;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: