jquery, bootstrap 3.0, and requirejs. can't use bootstrap's functions

Question

I've looked at all the info (ok.. first google page hits) related to this issue but the solutions didn't work.

my config.js looks like below:

var config = {

    paths   : {
        jquery        : "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
        // "jquery"        : "momsplanner/backgrid/assets/js/jquery",                                                                                                                                                                                                           
        "underscore"    : "momsplanner/underscore/underscore",
        "text"          : "momsplanner/requirejs_text/text",
        // "backbone"      : "momsplanner/backbone",                                                                                                                                                                                                                            
        "Backbone"      : "momsplanner/backgird/assets/js/backbone",
        "Backgrid"      : "momsplanner/backgrid/lib/backgrid",
        "bootstrap"     : "momsplanner/bootstrap/dist/js/bootstrap"
        // "bootstrap"     : "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap"                                                                                                                                                                                   
        // 'jquery.bootstrap'     : "momsplanner/backgrid/assets/js/bootstrap"                                                                                                                                                                                                  
    },

    // A lot of dependencies don't support AMD loaders. Here is an example shim                                                                                                                                                                                                 
    // configuration to remedy that.                                                                                                                                                                                                                                            
    shim : {
        "underscore": {
            exports: '_'
        },
        "Backbone" : {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        "Backgrid" : {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: 'Backgrid'
        },
        'bootstrap' : {
            deps: ["jquery"]

        }
    }
};

if (typeof exports === 'object') {
    // If this file is loaded from node, export the config variable.                                                                                                                                                                                                            
    module.exports = config;
} else if (typeof define === 'function' && define.amd) {
    // If this file is being loaded in the browser, load the config                                                                                                                                                                                                             
    define([], function() {
        requirejs.config(config);
    });
}

And I'm loading a module like following

 require( [                                                                                                                                                                                                                                                                     
 'momsplanner/js/custom_bootstrap'                                                                                                                                                                                                                                              

    ], function(custom_bootstrap) {                                                                                                                                                                                                                                             

    $(document).ready(function() {                                                                                                                                                                                                                                              

        custom_bootstrap.setNavbarActive();                                                                                                                                                                                                                                     
        custom_bootstrap.gotoTab();                                                                                                                                                                                                                                             

    });                                                                                                                                                                                                                                                                         

   });   

custom_bootstrap looks like:

define([
    "jquery",
    "bootstrap"
], function($) {

.. omitting some functions..

    // http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload                                                                                                                                                                      
    function gotoTab() {

        // Javascript to enable link to tab                                                                                                                                                                                                                                     
        var hash = document.location.hash;
        var prefix = "tab_";
        if (hash) {
            var $selector = $('.nav-tabs a[href='+hash.replace(prefix,"")+']');
            console.log($selector.html());
            $selector.tab('show'); // ERROR HERE!!!! <------------------------
        }

        // Change hash for page-reload                                                                                                                                                                                                                                          
        $('.nav-tabs a').on('shown', function (e) {
            window.location.hash = e.target.hash.replace("#", "#" + prefix);
        });
    }


    return {
        setNavbarActive: setNavbarActive,
        gotoTab: gotoTab
    };

I get error message at the $selector.tab('show') with error message:

Uncaught TypeError: Object [object Object] has no method 'tab' 

How do I fix this error?

Answer 1

i've followed this way.

In config i've defined bootstrap in shim:

shim:{
    ....
    bootstrap      : ['jquery']
    ....
}

then use insert it in deps array in module define and use bootstrap features like JQ plugin:

define(
    [
        "jquery",
        "bootstrap"
    ],

    function($){
       $('.some').affix();
    }
)

Answer 2

I also has the problem, and finally I solve it just change my bootstrap version.

First I use bootstrap3.1.1, it define plugins like this.

(function (o_o) {
    typeof define  === 'function' && define.amd ? define(['jquery'], o_o) :
    typeof exports === 'object' ? o_o(require('jquery')) : o_o(this.jQuery)
})(function($) { ... });

Then I change to bootstrap3.2.0, it define plugins like this.

+function ($) { ... }(jQuery)

The first one, when it defines a plugin, it can't mount the plugin to the global $, so when use the plugin, the error occurs: Uncaught TypeError: undefined is not a function.

The second works fine, because jQuery is a global variable.