1

I'm trying to use jquery/bootstrap/ and requirejs

Loading js files works perfectly and I checked that bootstrap sets $.fn.tab = someFunction;

but then, inside requirejs's callback function, calling $(foo).tab('show') results in an error saying that tab is not available for the object.

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

Everything loads fine, I confirmed they do by printing a log.
But I guess $ is redefined or something.
Where should I start to look?
grep '$\s*=' ?

my code is rather long and I posted under a different question: jquery, bootstrap 3.0, and requirejs. can't use bootstrap's functions

I'm using django if that makes any difference

Community
  • 1
  • 1
eugene
  • 39,839
  • 68
  • 255
  • 489
  • Is it really `$(foo)`? Because usually it would be more like `$('#foo')`. Note that the argument is a string. Also, the error message suggests that the 'tab' widget has not been loaded correctly, rather than `$` being overwritten. – Steve Oct 25 '13 at 02:05
  • yes, well ok it's more like $('#foo'). I know the code works, because It worked before I tried using requrejs – eugene Oct 25 '13 at 02:06

2 Answers2

1

The problem is likely that bootstrap hasn't finished loading at the time you try to use it. Try changing your bootstrap shim in the requirejs config to this:

shim: {
  "bootstrap": {
    deps: ["jquery"],
    exports: "$.fn.tab"
  }
}

RequireJS will wait to execute any code depending on bootstrap until $.fn.tab is set.

redmallard
  • 1,093
  • 6
  • 10
  • I checked (by logging) the $.fn.tab is assigned before the code which uses $.fn.tab.. – eugene Oct 25 '13 at 03:17
  • Try logging $.fn.jquery (once outside of the requirejs scope, and again where you're having the issue) to make sure it's the version you're expecting. – redmallard Oct 25 '13 at 03:55
0

Ok. U should use jquery no conflict function to avoid other library that use the same $ symbol.

$.noConflict();
jQuery( document ).ready(function( $ ) {
     // Code that uses jQuery's $ can follow here.
});

Now with many framework use $ such as prototypejs i think it is a good convention to follow. Reference :