Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

jQuery is not defined


Go to End
Reply

10 Posts   24820 Views

Avatar
karibe

11 January 2010 at 4:24am Community Member, 56 Posts

Hello

I have to use jQuery scripts with ss 2.3.4.
But construction like this:

// Standard jQuery header
(function($){
$(document).ready(function() {
   $("#nav ul").css({display: "none"}); // Opera Fix
   $("#nav li").hover(
         function(){
            $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(100);
         },
         function(){
            $(this).find('ul:first').css({visibility: "hidden"});
   });
})
})(jQuery);


cause error like in subject, in firebug console I have "jQuery is not defined"

Avatar
Willr

11 January 2010 at 9:09am Forum Moderator, 5511 Posts

Silly question but has the jquery library has been included before this file?

Avatar
karibe

13 January 2010 at 5:20am Community Member, 56 Posts

Yes, in Page_Controller in init() method

      Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js");
      Requirements::javascript("themes/".SSViewer::current_theme()."/js/dropdown.js");
      Requirements::javascript("themes/".SSViewer::current_theme()."/js/behaviours.js");

Avatar
Willr

13 January 2010 at 8:51am Forum Moderator, 5511 Posts

Can you see it being loaded on the front end though? Also is the jquery file on the front end being included before your file. The requirements class does do some reorganization so what you have the in PHP may not always reflect whats actually included on the front end. If all the files are being included you might want to check the contents actually exist and otherwise do google search http://old.nabble.com/jQuery,-$-is-Not-Defined-Errors-td18801392s27240.html.

Avatar
karibe

13 January 2010 at 11:44pm Community Member, 56 Posts

Ok fixed, my bad. I had another

   <script type="text/javascript" src="$ThemeDir/js/dropdown.js"></script>
   <script type="text/javascript" src="$ThemeDir/js/behaviours.js"></script>

and same loadings in Page_Controller

Avatar
PapaBear

14 January 2010 at 3:18pm Community Member, 26 Posts

pinging off this topic. I have a website that is reporting an error in the forum.js file that jquery is not defined. In the generated page source forum.js is being loaded prior to jquery.js which is (of-course) an issue.

All the files are being loaded via the Requirements class.

Is there any way to force the load order? Or another simple way to load the scripts in the correct order (other than brute-force via lines in the header template)?

Regards
James.

Avatar
biapar

15 January 2010 at 4:45am Forum Moderator, 435 Posts

You must use into your javascript section, as first row:

JQ = jQuery.noConflict();

then, for each JQUERY function call:

NOT:

(function($){
$(document).ready(function() .... etc

BUT

(function(JQ){
JQ(document).ready(function() { .... etc

Bye

Avatar
banal

15 January 2010 at 6:02am (Last edited: 15 January 2010 6:04am), Community Member, 901 Posts

You don't have to use noConflict if you use a closure like this:

;(function($) {
   // this is a substitute for $(document).ready,
   // so you don't need to put that later on!

   $(function(){
      // your code here
   });
})(jQuery);

The jQuery conflict might also result in multiple versions of jquery being loaded. Always make sure you only load jquery once (some modules also include jquery using the Requirements class)

Go to Top