Using jquery with requirejs

Question

I have two javascript libraries, one in which I wrote as a connector and the other being a thirdparty library "bootbox.js". I'm using requirejs to setup my custom library, however I'm not sure how to do the same for bootbox.js without having to alter the bootbox js code.

the js error I'm getting.

TypeError: $ is not a function

Current config.

warnings.js

requirejs.config({
    "shim": {
        'bootbox': {
            deps: ['./jquery']
        }
    }
});

define(["./jquery", "./vendor/bootbox"], function($) {

    var int;

    int = function(spec) {
        $('#' + spec.id).dialog({do something});
    }

    return int;
}

and now bootbox.js

window.bootbox = window.bootbox || (function init($, undefined) {
  "use strict";
    //do something
}(window.jQuery));

Anybody know how to get the bootbox js library to use the jquery namespace?

have you tried this? http://requirejs.org/docs/jquery.html#shimconfig See also: http://stackoverflow.com/questions/15471088/requirejs-why-and-when-to-use-shim-config/15486691#15486691 — explunit, Oct 07 '13 at 16:59
I tried requirejs.config({ "shim": { "./vendor/bootbox": ["jquery"] } }); but I'm just really confused with how it works. I'll try reading that article again. — Code Junkie, Oct 07 '13 at 17:05
if you are unable to get it working, please also post your require.config section — explunit, Oct 07 '13 at 17:19
@explunit requirejs is configured by the Tapestry5 framework. I'm doing nothing more than calling the warnings script. — Code Junkie, Oct 07 '13 at 17:55

Hussein Nazzal · Answer 1 · 2013-10-07T17:57:15.237

0

in the app.js file

require.config({
    ....
    shim: {
        'bootbox': {
            deps: ['./jquery'] --> dependancies 
        }
    }
)}

this means that when you

require('bootbox')

then require.js will bring jquery first and then load your other file . please visit this link for more info

edited Oct 07 '13 at 17:57

answered Oct 07 '13 at 17:18

Hussein Nazzal

2,557
18
35

Just be very careful if you load jquery from a CDN if you do this. See http://requirejs.org/docs/api.html#config-shim and look at the "Important Optimizer Notes for Shim Config" – deitch Oct 07 '13 at 17:31
thanks i will take a look at that .. because im doing this all the time :( – Hussein Nazzal Oct 07 '13 at 17:34
1

I was, too. I cannot remember how I resolved it, been more server-side for the last while and only coming back to client now. – deitch Oct 07 '13 at 17:38
@HusseinNazzal Should I be wrapping shim in requirejs.config? also, what is depts? Thanks. – Code Junkie Oct 07 '13 at 17:54
@HusseinNazzal still no luck :/, I'm still getting the following error. TypeError: $ is not a function var appendTo = $("body"); I'm doing the following, warnings.js requirejs.config({ "shim": { 'bootbox': { deps: ['./jquery'] } } }); define(["./jquery", "./vendor/bootbox"], function($) { and I'm not adding any code to bootbox. – Code Junkie Oct 07 '13 at 18:05
I believe I'm doing everything as you have specified? Is this a namespace issue? – Code Junkie Oct 07 '13 at 18:05
i guess you mean `require(["./jquery", "./vendor/bootbox"]` not define – Hussein Nazzal Oct 07 '13 at 18:09
I just changed my question above to reflect the current code configuration. The error happens from within the bootbox. – Code Junkie Oct 07 '13 at 18:15

Using jquery with requirejs

1 Answers1