CODEWITHSUNDEEP
requirejs
Carl Raymond
Carl Raymond

Reputation: 4479

RequireJS configuration for jQuery

I'm trying to configure RequireJS to load jQuery from a different folder on my site than the /Scripts folder where everything else lives. I'm watching the page load with Fiddler, and I always see the jQuery request go out for /Scripts/jquery.js instead of the right URL.

In my markup, I have this:

<script src="@Url.Content("~/Scripts/require.js")" type="text/javascript" data-main="@Url.Content("~/Scripts/main")"></script>

In /Scripts/main.js I have this:

require.config({
    waitSeconds: 10,
    paths: {
        "jquery": "/N2/Resources/Js/jquery-1.7",
        "modernizr": "modernizr-2.0.6-development-only"
    }
});

require(["jquery", "jquery.utility", "jquery.link-decorators", "jquery.google-analytics", "accessibility", "modernizr"], function ($) {

... omitted

});

In Fiddler, I see the correct modernizr request go out, but the request for jQuery goes out for /Scripts/jquery.js.

As a test, I changed my modernizr line to "modernizr" : "/N2/Resources/Js/modernizr-2.0.6-development-only", and I see the request go out for that resource (of course it returns a 404). So I know that RequireJS sees my configuration, and is processing it.

NOTE: I'm aware of the various ways to deal with jQuery in RequireJS. All my plugins define modules, so out-of-order loading won't be a problem. I'm using jQuery 1.7, which is AMD-aware.

Upvotes: 1

Views: 1953

Answers (1)

Carl Raymond
Carl Raymond

Reputation: 4479

I figured it out. In markup in the body of my page, I have

<script type="text/javascript">
require(["jquery", "Rotator"], function ($, Rotator) {
    $(document).ready(function () {
        var homeRotator = new Rotator();
        homeRotator.initialize($('#home-rotator ul.rotator-content li'), { viewTime: 30000, transitionTime: 2500 });
    });
});

This is what's causing the request for /Scripts/jquery. The Rotator module depends on jquery. If I remove the jquery dependency here, the page loads properly. The problem seems to be that I put my require.config settings into main.js, which is is loaded asynchronously by require.js. Before main.js is loaded, the script above is encountered in the body, so the request for jQuery goes out to the default location, not the configured location.

I moved my configuration settings into a <script/> tag in the page head, and now it's working.

Upvotes: 3

Related Questions