jQuery is not working with RequireJS

Question

I know that my question is so similar to this one, but I have the same problem and none of the solutions work for me.

My directory structure is the following:

static
    lib
        require.js
        jquery-1.11.3.js
        progressbar.js   
    client
        client.messages.js
        client.js
    main.js
    config.js

My HTML file is like this:

<script src="{{ url_for('static', filename='scripts/lib/require.js') }}"></script>

<script>
    var require = {
        baseUrl: "/static/script",
        paths: {
        /* Load common libraries from CDN and fallback to local versions. */
        "jquery":      "lib/jquery-1.11.3.min.js",
        "progressbar": "lib/progressbar.min.js",
        "messages":    "client/client.messages.js"
        }
    };
</script>

<script src="{{ url_for('static', filename='scripts/main.js') }}"></script>

I have also tried to make the configuration in the config.js file which was like:

var require = {
        baseUrl: "/static/script",
    paths: {
        /* Load common libraries from CDN and fallback to local versions. */
        "jquery":      "lib/jquery-1.11.3.min.js",
        "progressbar": "lib/progressbar.min.js",
        "messages":    "client/client.messages.js"
    }
};

and then the HTML file was like:

<script src="{{ url_for('static', filename='scripts/config.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/lib/require.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/main.js') }}"></script>

Further down in my HTML file there is this line:

<body onload="bodyLoaded()">

and this bodyLoaded() function is in my main.js:

var bodyLoaded = function () {
    //load scripts first
    var scripts = ['static/scripts/client/client.messages.js', 'static/scripts/client/client.js'];
    $.getScript(scripts[0], function () {
        $.getScript(scripts[1], function () {
            pluginCheck();
        });
    });
};

The error I get is:

Uncaught ReferenceError: $ is not defined

for this line in bodyload():

$.getScript(scripts[0], function () {

Am I missing something?

Sorry, can you make your point a bit more clear? What exactly can I change? — Galil
– Galil, Commented Jan 21, 2016 at 12:15
Try changing the code $.getScript(... to jQuery.getScript(... — Arnau Lacambra
– Arnau Lacambra, Commented Jan 21, 2016 at 12:17
No, there is (almost) the same error: "Uncaught ReferenceError: jQuery is not defined" — Galil
– Galil, Commented Jan 21, 2016 at 12:27

Louis · Accepted Answer · 2016-01-21 12:47:55Z

2

Well... you're loading RequireJS, you've configured it, but you are not using it.

One way to get what you want would be:

var bodyLoaded = function () {
    //load scripts first
    var scripts = ['static/scripts/client/client.messages.js', 'static/scripts/client/client.js'];
    require(['jquery'], function ($) {
        $.getScript(scripts[0], function () {
            $.getScript(scripts[1], function () {
                pluginCheck();
            });
        });
     });
};

I've added require(['jquery'], ... so that jQuery actually gets loaded.

This being said, it is very likely that this is not the solution you want to end with. For one thing, it seems to me that client.messages.js and client.js are candidates for being loaded with RequireJS so, really, RequireJS should be configured to find them (I see client.message.js in the config but not client.js). You'll most likely have to use shim to define the dependencies among them.

I suggest that you thoroughly read RequireJS' documentation.

answered Jan 21, 2016 at 12:47

Louis

152k28 gold badges287 silver badges332 bronze badges

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

1 Comment

Galil Over a year ago

Thanks a lot! That was the problem. I have not used client.js till now and that's why I have not loaded.

Collectives™ on Stack Overflow

jQuery is not working with RequireJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related