SharePoint 2010 - $ is not defined in Firefox using jQuery 1.7.2

Question

When ListItem's add/edit pages are open via Firefox, reference to jQuery library returns 200 OK ( i've checked it up via firebug ), but JS error appears at first line of jQuery code

<script type="text/javascript" src="/_layouts/CompanyListCustomForms/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function () {
      // some code here    
    }); 

I noticed that in generated html, reference to jQuery library looks like this

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

As you see, instead of type="text/javascript" it's type="text/jscript". Now this same portion of html gets generated in IE and Chrome as well, but only with Firefox I have "$ is undefined error". How can I solve this problem ?

Answer 1

Try adding the following line above your jQuery function

jQuery.noConflict(); 

Otherwise - is there some kind of grease monkey script overriding page functions?

Answer 2

Since you are use $ as an alias for jQuery the noConflict method should be called on the $ symbol, like $.noConflict(); Besides $ or jQuery you can use anything you want, for example: test = jQuery; Then use test to reference.

Answer 3

Are you adding the script reference directly into the master page?

If the problem is happening in PopUp windows (like the list's 'New Item' or 'Edit Item'), maybe there is a conflict because the script is referenced more than one time. Basically, the popup window uses the SAME master page (although in an iframe), and there is a chance that by adding a second reference, it's causing conflicts in the browser.

Try adding the script using the following code, which is a control that only adds the script if it's not referenced already:

<SharePoint:ScriptLink runat="server" Name="<% $SPUrl:~sitecollection/_layouts/CompanyListCustomForms/Scripts/jquery-1.7.2.min.js %>" />

By the way, why not use the latest stable version of jquery instead of 1.7.2?

Happy coding!

Answer 4

Typically you'll want to use "text/javascript". jscript is technically wrong, but I'm not sure that would cause it to blow up. The fact that it's referencing the $ means it's executing it.

If it works in everything but Firefox, then I'd try changing it to javascript and see if that fixes it (it's a simple change and would rule out if it's just Firefox's rendering engine being picky or not).

Aside from that, there's several things that could be causing it. Where's your script block in relation to the reference that's loading jQuery. If you're not going to encapsulate your jQuery in a $(document).ready() type function, then it has to be called after jQuery has loaded. Otherwise, the error is absolutely correct, $ is undefined because I'm trying to run something but jQuery hasn't been loaded yet. It's typically best practices to have anything dependent on jQuery to be in a $(document).ready() function as this ensures that jQuery has been loaded and initiated and the rendering of the page is complete before anything tries to run. It's possible you're seeing a Firefox inconsistency due to the fact that Firefox renders so much faster than IE and it may be getting ahead of itself. I've seen this with IE vs. Chrome many times.

The other possible issue (that was previously mentioned), is that jQuery may be loaded twice. If you try to load/reference the jQuery library and either it has already been loaded, or another version of it is loaded/referenced, it will blow up with the vague $ not defined. A simple solution to that is to crack open the dev tools and search for jquery to see how many times it is referenced.

Answer 5

I changed jQuery reference to CDN, and it started to work properly in Firefox.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Answer 6

Since its not working in just one browser but fine in other browsers you could use the snippet below to check if jQuery is loaded and then insert the CDN link.

<script type="text/javascript">    window.jQuery || document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"><\/script>')</script>