How can I access jquery global namespace by a simple script reference after using require.js?

Question

I want to write one script that runs on every apge--that uses the jquery plugins that I just loaded--and run it first thing after all plugins are loaded. According to comments thus far, this requires defining and running modules in Require.js...

I have footer partial in a CMS that contains my Require.js code, thus:

<!-- special version of jQuery with RequireJS built-in -->
script data-main="/addons/shared_addons/themes/base/js/main" src="/addons/shared_addons/themesbase/js/require-jquery.js" type="text/javascript"> /script

...and my main.js is fairly standard:

// urlArgs: "bust=v1"  // for release
require.config({
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        Corner: "/addons/shared_addons/themes/base/js/jquery.corner",
        JQForm: "/addons/shared_addons/themes/base/js/jquery.form",
        Gritter: "/addons/shared_addons/themes/base/js/jquery.gritter.min",
        JQUI: "/addons/shared_addons/themes/base/js/jquery-ui-1.8.21.custom.min",
        TimePicker: "/addons/shared_addons/themes/base/js/jquery.ui.timepicker",
        DateFormat: "/addons/shared_addons/themes/base/js/date.format",
        countdown: "/addons/shared_addons/themes/base/js/jquery.countdown.min",
        JQMustache: "/addons/shared_addons/themes/base/js/jquery-Mustache",
        Mustache: "/addons/shared_addons/themes/base/js/mustache",
        Kendo: "/addons/shared_addons/themes/base/js/kendo.web.min",
        Chosen: "/addons/shared_addons/themes/base/js/chosen.jquery.min",
        EveryPage: "/addons/shared_addons/themes/base/js/another_doc_ready_script"
    }       
});

require([
'jquery', 
'Corner',
'JQForm',
'Gritter',
'JQUI',
'TimePicker',
'DateFormat',
'countdown',
'JQMustache',
'Mustache',
'Kendo',
'Chosen'
],
[ "EveryPage" ],
function($) {
    //run
    $(function() {
        console.log('get everything we could possibly need');
    });
});

"another_doc_ready_script.js" contains the "everypage" module definition:

console.log('here');
define("EveryPage",
        [
        'jquery', 
        'Corner',
        'JQForm',
        'Gritter',
        'JQUI',
        'TimePicker',
        'DateFormat',
        'countdown',
        'JQMustache',
        'Mustache',
        'Kendo',
        'Chosen'
        ],
    function($) {
console.log('in everypage');
$(document).ready(function() { 
    console.log('in everypage doc ready');
        $( "body").removeClass('nodisplay');
    }); // document ready
console.log('leaving everypage');
   }  // function-define-require
); // define-require

EDIT: Bergi's comment made this make more sense. I have adapted my code above, but it is still not working. Zip. Nada. No console log statements or errors. This has got to be a common usage, but I am not finding a simple example.

Bergi · Accepted Answer · 2012-08-04 02:08:30Z

1

From the docs:

A module is different from a traditional script file […]. It can explicitly list its dependencies […].

[That] allows them to be loaded as fast as possible, even out of order, but evaluated in the correct dependency order.

How to define such a module with dependencies is described in section § 1.2.3.

answered Aug 4, 2012 at 2:08

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

shamelesshacker Over a year ago

Thanks, Bergi. I tried other things based upon your comment, but I still don't have a working example. Updated the main Question to reflect current state.

Bergi Over a year ago

So the script can now be seen loading in the network tab (try also a log statement before define), but the module defined there is not executed?

shamelesshacker Over a year ago

no sir, now the "another_doc_ready_script.js" script is not loading in the Net tab. Everything else is, though, and that file is in the same dir as those plugins. (made more attempts following [link]backbonetutorials.com/organizing-backbone-using-modules; see above)

Bergi Over a year ago

I don't think you can supply more than one array to the require function. Try only require(["jquery", "EveryPage"], function($){…}); - this should load "EveryPage", and "EveryPage" should load its dependencies.

shamelesshacker Over a year ago

That seemed to fix it! Can not recall at this moment where I copied the sample that had the two array module code...maybe I hallucinated it. Thank you immensely!

Collectives™ on Stack Overflow

How can I access jquery global namespace by a simple script reference after using require.js?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related