Why are bootstrap javascript features not working?

0
votes

I'm using Gantry template on Joomla! that has bootstrap integrated into it. I wanted to use the bootstrap javascript components, like lightbox, tabs. I added jQuery (no conflict) as mootools is already loaded, and then added the required code. But, it doesn't work as expected. I set up a test page at http://v2.marlownailandbeauty.co.uk/index.php?option=com_content&view=article&id=47&Itemid=127

Neither the tabs, nor the lightbox work (just below youtube vid). I can't see any JS errors, just wondering why it might not be working? Any bright ideas? :)

1
javascripttwitter-bootstrapjoomlajoomla2.5
chrome + F12 before even asking what the problem is. There is a debugger in most browsers you should learn to use it. - mpm
Thanks, but I know about firebug. I have posted this because there is no errors listed in the debugger. - Oliver Gibson
Have you added bootstrap JS file? I faced same issue couple days ago. Cannot check it because I'm on smartphone right now. - Denis O.
I have added bootstrap.js file indeed, but worth checking. - Oliver Gibson

1 Answers

0
votes

Looking at your code quickly, it seems to me that you load:

jQuery
JQuery no conflict
Mootools Various other Mootools scrripts

To the best of my understanding, it's recommended to load jQuery (no conflict) after Mootools and all the other scripts have loaded: source http://docs.jquery.com/Using_jQuery_with_Other_Libraries
ie:
jQuery
Mootools
Various other Mootools scrripts
JQuery no conflict

A couple of ways to test this quickly. You could edit the template file directly and change the order, or use an extension like jQuery Easy to load the no conflict scripts.

Or a third option ... have you checked if you even need Mootools in your template? You could use an extension to disable mootools and see what happens. If you are lucky your template will still work well and your site will load faster. And it's easy enough to reverse if mootools is indeed needed.

Good luck!