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   25263 Views

Avatar
karibe

Community Member, 56 Posts

11 January 2010 at 4:24am

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

Forum Moderator, 5513 Posts

11 January 2010 at 9:09am

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

Avatar
karibe

Community Member, 56 Posts

13 January 2010 at 5:20am

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

Forum Moderator, 5513 Posts

13 January 2010 at 8:51am

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

Community Member, 56 Posts

13 January 2010 at 11:44pm

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

Community Member, 26 Posts

14 January 2010 at 3:18pm

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

Forum Moderator, 435 Posts

15 January 2010 at 4:45am

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

Community Member, 901 Posts

15 January 2010 at 6:02am

Edited: 15/01/2010 6:04am

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