CODEWITHSUNDEEP
javascriptjqueryrequirejstwitter-bootstrap-3
Ben Dubuisson
Ben Dubuisson

Reputation: 757

Twitter Bootstrap js file loaded but not working alongside requirejs

I have a Laravel app that uses Twitter Bootstrap. Everything was working fine and then I implemented the Aloha WYSIWYG editor - http://www.aloha-editor.org/ which uses RequireJS.

I load the JS files in the following order:

  1. jQuery
  2. BootstrapJS file
  3. RequireJS
  4. AlohaJS

In that order, Aloha will work fine but the $().modal function won't work (TypeError is not a function...) I can see that bootstrap.min.js is loaded in Firebug though.

If I remove the RequireJS the bootstrap functions work fine.

I have had a look at the doco but what I don't understand is why my Bootstrap functions don't work even though the file is being loaded properly ? Do I have to load it in RequireJS ?

In the RequireJS doco, you should load RequireJS like that: <script data-main="/assets/main" src="/assets/lib/require.js"></script> but the way Aloha tells us to implement doesn’t have any data-main attribute, so where is the main.js file where the modules are being loaded?

Thank you

Upvotes: 1

Views: 1179

Answers (1)

Tiago Barreto
Tiago Barreto

Reputation: 822

Try again with code below:

requirejs.config({
    appDir: ".",
    baseUrl: "js",
    paths: { 
        'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min', 'libs/jquery-min'],
        'bootstrap': ['//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.', 'libs/bootstrap-min']
    },
    shim: {
        'bootstrap' : ['jquery']
    }
});

require(['jquery', 'bootstrap'], function($) {
    console.log("Loaded :)");    
    return {};
});

See more Loading Bootstrap from CDN with Require.js

Upvotes: 2

Related Questions