$ is undefined when loading jQuery through Modernizer.

Question

I load jQuery with modernizr and all code in the 'complete'-function runs fine! But if I try to call some js from outside 'Moderniz.load' firebug says: '$ is not defined'.

This works:

<script>
Modernizr.load([
{
    load: [ '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'],
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('/weblounge-sites/www/js/jquery-1.7.min.js', '/weblounge-sites/www/js/jqueryui-1.8.min.js');
      }
    }
},
{
    load: [ 'some additional scripts' ],
    complete: function() {
        $ = jQuery;
        $(document).ready(function(){
          some js
          });

        });
    }
},  
{
    test: Modernizr.boxshadow,
    nope: 'polyfills/PIE.js',
}
]);
</script>

But the call from a view lines later fails:

<script>
$(document).ready(function(){
    $('#hauptsponsoren').cycle({
        fx: 'fade', 
        speed: 4000,
        timeout: 10000
    });                 
});
</script>

I am just learning yepnope / Modernizr and I found that if I watch the timing, I am fine. What I did was add an init() method in your 'complete'. Then, your $document.ready lines later would be in this init() function. This worked for me... — user1889992
– user1889992, Commented Nov 25, 2013 at 17:19

Alex Sexton · Accepted Answer · 2012-01-16 19:54:39Z

Scripts in yepnope/modernizr.load are loaded asynchronously. That means that by design, they won't have executed in the space directly below their inclusion. This makes the page performance better by not blocking the page from rendering further.

The callback and complete options are there for you to be alerted whenever the scripts are ready. The fastest route to making sure that jQuery exists, is to just wrap the stuff lower on your page:

<script>
function appInit() {
  $(document).ready(function(){
    $('#hauptsponsoren').cycle({
      fx: 'fade', 
      speed: 4000,
      timeout: 10000
    });                 
  });
}
</script>

And then in the complete function, call the appInit() function. Your page load times will thank you.

complete: function() { ...; appInit(); }

If your dom is ready at that point, it will run right away, or if it's not yet, it will wait a little longer for that to occur as well.

Hope that clears it up.

Francis Lewis · Accepted Answer · 2012-01-11 21:21:52Z

0

The problem comes because your modernizr is loading jQuery and assigning it like this: $ = jQuery, however, it's only assigned within the complete: function() { context. To make it work outside of that context, before your Modernizer.load set:

var $;

That will set the scope of $ as global so you can use it anywhere at that point.

If you don't set the scope of $ to global, using jQuery will still work like this:

jQuery(document).ready(function()

answered Jan 11, 2012 at 21:21

Francis Lewis

8,9889 gold badges58 silver badges68 bronze badges

7 Comments

Simon Over a year ago

jQuery(document).ready(function() doesn't work. firebug says: 'jQuery is not defined'.

Francis Lewis Over a year ago

See what you get if you try window.jQuery

Francis Lewis Over a year ago

Wow, that's really odd. Open up firebug and watch the "net" panel to see if jQuery is loaded at any point.

Simon Over a year ago

it is loaded from google, status: 200 - that's fine. As I wrote: inside the Modernizer.load I can use jQuery as expected...

Francis Lewis Over a year ago

Ok, I would bet the problem is that the modernizer isn't loading jQuery before you're trying to call it. You can test it like this (put this after your modernizer code) <script type="text/javascript">console.log('page is loaded');</script> Then, inside the complete method inside the modernizer code, put: console.log('inside modernizr'); Now I'm going to bet firebug will show "page is loaded" before it shows "inside modernizr". Let me know what the result of that is.

|

Collectives™ on Stack Overflow

$ is undefined when loading jQuery through Modernizer.

2 Answers 2

Comments

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Related