CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraprequirejs
imperium2335
imperium2335

Reputation: 24112

RequireJS script load order

I am trying to load bootstrap and kendo-ui using requirejs but they both depend on jquery to be loaded first.

Currently all three scripts are loading async (from CDNs) with:

require.config({
    paths: {
        "jquery": [
            "https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min",
            "libs/jquery"
        ],
        'bootstrap': [
            'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min',
            'libs/bootstrap'
        ],
        'kendo': [
            'http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min',
            'libs/kendo'
        ]
    }
})

require(['jquery', 'bootstrap', 'kendo'], function () {
    $('body').html('hi!')
})

How do get it to not load other scripts until jquery is loaded completely?

I assume there is a nicer way than:

require(['jquery'], function () {
    require(['bootstrap', 'kendo'], function () {
        $('body').html('hi!')
    })
})

If that even works (off top of my head).

Upvotes: 3

Views: 2038

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to use shim-option like,

require.config({
   paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min',
        'bootstrap': 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min',
        'kendo': 'http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min'
    }, 

    // Use shim for plugins that does not support ADM
    shim: {
        'bootstrap': ['jquery'],
        'kendo': ['jquery']
    }
});

Also, refer the example-of-jquery-shim

Upvotes: 2

Related Questions