Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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 ?

share|improve this question
add comment

6 Answers 6

Try adding the following line above your jQuery function

jQuery.noConflict(); 

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

share|improve this answer
    
No, there is no any script that overrides page functions. The only javascript library I'm using is jQuery. The rest are SP built-in scripts, which I don't believe will make use of $ sign. –  michael moore Sep 4 '12 at 7:18
1  
@michaelmoore you're actually wrong, check out this post: sharepointnutsandbolts.com/2011/05/… –  Christophe Sep 4 '12 at 18:37
    
@Christophe Thanks for blog post, however, even that doesn't help. I just changed src to reference to CDN, and it started to work, not sure why thou. –  michael moore Sep 5 '12 at 17:31
    
@michaelmoore right, it doesn't help on your question, I just wanted to correct the statement for you and other readers. –  Christophe Sep 5 '12 at 18:23
add comment

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.

share|improve this answer
    
yes, Anita, I tried $.noConflict(), didn't help. –  michael moore Sep 4 '12 at 9:54
add comment

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!

share|improve this answer
    
Thanks Amadeo, I'm referencing jQuery from custom page itself. But, if I had few references of jQuery on the single page, I assume, IE/Chrome would crash as well, but that doesn't happening. However, I'll change my code to use ScriptLink control instead. –  michael moore Sep 5 '12 at 6:18
add comment

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.

share|improve this answer
    
Well, I have only one reference of jQuery, checked it up in firebug, as you can see I'm using $(document).ready(), just with the simpler syntax $(function(){});. Now, did I get you right, and you're trying to say, that, execution of javascript reaches to $(function(){}); before jQuery library was loaded actually ? –  michael moore Sep 5 '12 at 6:22
    
If it's not wrapped in a $(document).ready(); that's entirely possible. JavaScript executes at run time in the order defined within the page, so if they're out of order that's entirely possible. –  webdes03 Sep 5 '12 at 16:00
    
Nope, all js code is wrapped inside of document ready. –  michael moore Sep 5 '12 at 17:31
add comment
up vote 0 down vote accepted

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>
share|improve this answer
add comment

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.