Magento Jquery Bootstrap and Prototype conflict? nav-tabs dont work

Question

I use Magento 1.9.2.4 and the following Theme

https://github.com/webcomm/magento-boilerplate

The description of it is "HTML5 Twitter Bootstrap 3.1 Magento Boilerplate Template"

It works fine with everything else of "Bootstrap responsive". My problem is, that all of the following on this Site did not work on my Installation:

http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

And "did not work" means you can click on next tab but the border and highlighting and so on is still on the first tab.

Same thing on "nav-pills" of Bootstrap.

In this Boilerplate there is a Workaround for Bootstrap dropdown:

jQuery.noConflict();
;(function ($) {
'use strict';

function Site(settings) {

    this.windowLoaded = false;

}

Site.prototype = {
    constructor: Site,

    start: function () {
        var me = this;

        $(window).load(function () {
            me.windowLoaded = true;
        });

        this.attach();
    },

    attach: function () {
        this.attachBootstrapPrototypeCompatibility();
        this.attachMedia();
    },

    attachBootstrapPrototypeCompatibility: function () {

        /*// Bootstrap and Prototype don't play nice, in the sense that
         // prototype is a really wacky horrible library. It'll
         // hard-code CSS to hide an element when a hide() event
         // is fired. See http://stackoverflow.com/q/19139063
         // To overcome this with dropdowns that are both
         // toggle style and hover style, we'll add a CSS
         // class which has "display: block !important"
         $('*').on('show.bs.dropdown show.bs.collapse active nav-tabs.active', function (e) {
         $(e.target).addClass('bs-prototype-override');
         });

         $('*').on('hidden.bs.collapse nav-tabs', function (e) {
         $(e.target).removeClass('bs-prototype-override');
         });*/

        var isBootstrapEvent = false;
        if (window.jQuery) {
            var all = jQuery('*');
            jQuery.each(['hide.bs.dropdown',
                'hide.bs.collapse',
                'hide.bs.modal',
                'hide.bs.tooltip',
                'hide.bs.popover',
                'hide.bs.tab'], function (index, eventName) {
                all.on(eventName, function (event) {
                    isBootstrapEvent = true;
                });
            });
        }
        var originalHide = Element.hide;
        Element.addMethods({
            hide: function (element) {
                if (isBootstrapEvent) {
                    isBootstrapEvent = false;
                    return element;
                }
                return originalHide(element);
            }
        });

    },

    attachMedia: function () {
        var $links = $('[data-toggle="media"]');
        if (!$links.length) return;

        // When somebody clicks on a link, slide the
        // carousel to the slide which matches the
        // image index and show the modal
        $links.on('click', function (e) {
            e.preventDefault();

            var $link = $(this),
                $modal = $($link.attr('href')),
                $carousel = $modal.find('.carousel'),
                index = parseInt($link.data('index'));

            $carousel.carousel(index);
            $modal.modal('show');

            return false;
        });
    }
};

jQuery(document).ready(function ($) {
    var site = new Site();
    site.start();
});

})(jQuery);

I already asked on github with no response question on github

So the Dropdown of Bootstrap is working. My Question am i doing anything wrong or am i missing something?

Why does the nav-tabs not work in here?

Answer 1

Adding the "'bower_components/bootstrap/js/tab.js'," tab.js to the gulpfile.js AND adding the tab class to the script.js solved my Problem with Bootstrap Nav Pills and Tabs.

       $('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
            $(e.target).addClass('bs-prototype-override');
        });

        $('*').on('hidden.bs.collapse', function(e) {
            $(e.target).removeClass('bs-prototype-override');
        });

At the end the code looks just like this:

jQuery.noConflict();
;(function($) {
'use strict';

function Site(settings) {

    this.windowLoaded = false;

}

Site.prototype = {
    constructor: Site,

    start: function() {
        var me = this;

        $(window).load(function() {
            me.windowLoaded = true;
        });

        this.attach();
    },

    attach: function() {
        this.attachBootstrapPrototypeCompatibility();
        this.attachMedia();
    },
    attachBootstrapPrototypeCompatibility: function() {

        // Bootstrap and Prototype don't play nice, in the sense that
        // prototype is a really wacky horrible library. It'll
        // hard-code CSS to hide an element when a hide() event
        // is fired. See http://stackoverflow.com/q/19139063
        // To overcome this with dropdowns that are both
        // toggle style and hover style, we'll add a CSS
        // class which has "display: block !important"
        $('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
            $(e.target).addClass('bs-prototype-override');
        });

        $('*').on('hidden.bs.collapse', function(e) {
            $(e.target).removeClass('bs-prototype-override');
        });
    },

    attachMedia: function() {
        var $links = $('[data-toggle="media"]');
        if ( ! $links.length) return;

        // When somebody clicks on a link, slide the
        // carousel to the slide which matches the
        // image index and show the modal
        $links.on('click', function(e) {
            e.preventDefault();

            var $link = $(this),
                $modal = $($link.attr('href')),
                $carousel = $modal.find('.carousel'),
                index = parseInt($link.data('index'));

            $carousel.carousel(index);
            $modal.modal('show');

            return false;
        });
    }
};

jQuery(document).ready(function($) {
    var site = new Site();
    site.start();
});

})(jQuery);