Include jQuery UI with requireJS using noConflict jQuery

Question

I'm working on a JavaScript module that uses jQuery, some functions of jQuery UI (draggable) and jPlayer. Recently I made myself familiar with requireJS to manage the dependencies properly.

I don't want to produce conflicts with a possibly already existing jQuery version that the site that includes my script uses. For this reason I am mapping the jQuery dependencies to a module "jquery-private" with a call of noConflict(), as is described in the requireJS guide.

As jQuery UI takes up a lot of space, I would also like to just include the modules that I am actually using. ui.draggable has the dependencies ui.core, ui.mouse and ui.widget, so I should have to include these 4 modules.

My problem is that I would like the jQuery UI modules and the jPlayer module to use my own version of jQuery, but obviously it isn't accessible by the global $ variable after I called the noConflict() method. Unfortunately neither jQuery UI nor jPlayer are AMD modules, so I needed to make shim configurations for them.

Here is my definition of the dependencies:

require.config({
    baseUrl: 'javascript/modules',
    paths: {
        jquery: 'jquery-2.1.3',
        jPlayer: 'jquery.jplayer',
        uiCore: 'jquery.ui.core',
        uiMouse: 'jquery.ui.mouse',
        uiWidget: 'jquery.ui.widget',
        uiDraggable: 'jquery.ui.draggable'
    },
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    },
    shim: {
        jPlayer: {
            deps: ['jquery']
        },
        uiCore: {
            deps: ['jquery']
        },
        uiMouse: {
            deps: ['jquery','uiCore']
        },
        uiWidget: {
            deps: ['jquery','uiCore']
        },
        uiDraggable: {
            deps: ['jquery','uiCore','uiMouse','uiWidget']
        }
    }
});

require(["json","jquery","jPlayer","uiDraggable"], function(json,___jQuery,jplayer,uiDraggable) {
    (...)
}

Obviously this code produces errors as the $ variable in the jQuery UI modules is not defined.

Is there any way to pass my own jQuery object to modules? The top answer in another thread (How use require.js to load jQuery with noConflict) suggests that what I am trying to do is not possible, but maybe there is some other way to do it?

If there is none, I probably have to use global variables and heavily edit the included modules, which kind of makes it questionnable why to use a dependency management library like requireJS in the first place...

Rashwan L · Accepted Answer · 2015-12-26 10:45:35Z

1

I found the following code on top of each module in jquery.ui:

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define([ "jquery" ], factory );
    } else {
        // Browser globals
        factory( jQuery );
    }
}(function( $ ) {...});

And it means jquery.ui checks when global AMD "define" function is defined and uses 'jquery' as AMD reference for module.

It will use no conflict of jquery based on requirejs recommendation in this and this.

And about how to use jQuery with AMD.

edited Dec 26, 2015 at 10:45

Rashwan L

38.9k7 gold badges108 silver badges113 bronze badges

answered Feb 24, 2015 at 18:54

Nima Shahri

1776 bronze badges

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

2 Comments

stefanS Over a year ago

Thank you! I had to figure out how to set the braces, but the jPlayer module that I also use has a very similar header. So now the jQuery UI modules seem to be correctly included by requireJS! Unfortunately the draggable() method does not seem to be available in the noConflict jQuery given by the variable of the require() call... A call of ___jQuery('div#test').draggable() produces the error message "undefined is not a function"... I thought jQuery UI modules would register new methods in the existing jQuery object? Is it because ___jQuery is noConflict and is loaded before jQuery UI?

Nima Shahri Over a year ago

@stefanS, I suppose the issue is related to the way you named/referenced each module. you do not need to define "shim" because of AMD support of modules. Could you structure your files and setup config file based on http://learn.jquery.com/jquery-ui/environments/amd/

Collectives™ on Stack Overflow

Include jQuery UI with requireJS using noConflict jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related