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; }