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.

score 1 · Accepted Answer · answered Aug 04 '12 at 02:08

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 04 '12 at 02:08

Bergi

630,263
148
957
1,375

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. – shamelesshacker Aug 04 '12 at 14:52
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? – Bergi Aug 04 '12 at 15:11
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]http://backbonetutorials.com/organizing-backbone-using-modules/; see above) – shamelesshacker Aug 04 '12 at 15:29
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. – Bergi Aug 04 '12 at 15:50
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! – shamelesshacker Aug 04 '12 at 16:21

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

1 Answers1