Conflict between bootstrap 4.1.3 and prototype 1.7


Topic: Conflict between bootstrap 4.1.3 and prototype 1.7

bhavinshah asked 4 years ago

Bootstrap 4 and Prototype are conflicting and when I click on tabs it hides other menus and tabs


Bartłomiej Malanowski staff pro premium answered 4 years ago

It's an issue with Bootstrap, not MDB. Also, on their official statement they say: 
Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI

You can read more here


It's not an issue with Bootstrap. It's purely a conflict with Bootstrap and Prototype.js

Not sure why an employee couldn't provide the solution, but here is a solution so that anyone else who finds this useless post will now have something useFULL to resolve the issue.

In my scenario I'm using Magento. But you can easily modify these steps and do this with another platform. Step 1 In the local.xml add the following lines

<reference name="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/jquery/jquery-3.3.1.min.js</script></action>
            <action method="addJs"><script>lib/jquery/noconflict.js</script></action>

Step 2 Go to the location of the noconflict.js file. If it's not already there, create it. paste everything below:

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
    var disablePrototypeJS = function (method, pluginsToDisable) {
            var handler = function (event) {
                event.target[method] = undefined;
                setTimeout(function () {
                    delete event.target[method];
                }, 0);
            };
            pluginsToDisable.each(function (plugin) { 
                jQuery(window).on(method + '.bs.' + plugin, handler);
            });
        },
        pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab'];
    disablePrototypeJS('show', pluginsToDisable);
    disablePrototypeJS('hide', pluginsToDisable);
}
jQuery(document).ready(function ($) {
    $('.bs-example-tooltips').children().each(function () {
        $(this).tooltip();
    });
    $('.bs-example-popovers').children().each(function () {
            $(this).popover();
    });
});
var $j = jQuery.noConflict();

Conclusion These steps allow for using jquery 3.3.1, Bootstrap 4, MDB, Popper.js, and Prototype.js all simultaneously in magento without issues. Note the $j at the end above. You will use $j when you are using jquery instead of $. This resolves all issues with tabs, pills, button dropdowns, modals etc... enjoy. It took me a very very long time to piece together all of it from scarce sources around the net.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No