How do I use jquery ui with requirejs

javascript jquery-ui requirejs

33,226

Solution 1

You need to include jquery-ui:

define(['jquery-ui', 'backbone'], function() {
    $('div').addClass('white');
});

jquery should be required automatically as it is a dependency of jquery-ui

Additionally, none of these scripts return anything, but their variables are assigned to the window object. No need to assign them.

Solution 2

try

define(['jquery', 'jquery-ui', 'underscore', 'backbone'], function($, ui, _, Backbone) {
    // $.ui should be defined, but do
    // $.ui = ui if its not
    $('div').addClass('white');
});

33,226

Author by

bodokaiser

Hey, I am Bodo Kaiser and I have a bit knowledge around nodejs.

Updated on July 04, 2020

Comments

bodokaiser almost 4 years

I want to use jQuery UI's addClass function in my application.

Beside I am using the normal jQuery, underscore, backbone all tiered together with requirejs.

I have configured jQuery UI like this:

require.config({

    deps: ["main"],

    paths: {
        "text": "lib/text"
        , "jquery": "lib/jquery"
        , "jquery-ui": "lib/jquery-ui"
        , "underscore": "lib/underscore"
        , "backbone": "lib/backbone"
        , "bootstrap": "lib/bootstrap"
        , "templates": "../templates"
    },

    shim: {
        "jquery-ui": {
            exports: "$",
            deps: ['jquery']
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            exports: "Backbone",
            deps: ["underscore", "jquery"]
        },
        "bootstrap": ['jquery']
    }

});

In the application I do:

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    $('div').addClass('white');
});

Unfortunately this only does the normal addClass not the animated one from jQuery UI.

PS: I use the full jQuery edition.

Ruan Mendes almost 12 years

Don't need jquery, all the other ones already list it as a dependency.
Ruan Mendes almost 12 years

Shouldn't need to list underscore? Since it's already listed as a dependency of backbone?
nickaknudson almost 12 years

IDK if jquery-ui will correctly add itself to $ if jQuery doesn't get assigned to $ in the closure
nickaknudson almost 12 years

I've never used requirejs before, so I am just shooting in the dark, but I was concerned about $ being defined for jquery-ui to add itself to $.ui within the closure.
Austin almost 12 years

No, actually they do not need to be assigned at all. They assign themselves to the window object (window.$, window._, window.Backbone). Require works by passing in the return value of the included file, these libraries return nothing, but set their global references.
nickaknudson almost 12 years

What if different versions are needed, compatibility is on, or multiple $ libraries are used?
Austin almost 12 years

Regardless, this is not how require works with these libraries. If this was kept as a function, the values passed in would be null because the scripts return nothing, but preform a global action.
bodokaiser almost 12 years

you have to assign them. It can be that some modules work without but there can be some which don't have access to them
Austin almost 12 years

Inclusion of these core libraries should also go in your main.js file, in a Require() call.
jgomo3 about 11 years

@Austin How to assign modules that actually return the module and use jquery-ui and backbone at the same time?
Robert almost 10 years

I feel like not including JQuery defeats the purpose of using Require.JS... the idea is to break away from using global variables. Even if it seems unnecessary, it opens a door that would have otherwise been closed.