Topic: Conflict between bootstrap 4.1.3 and prototype 1.7
bhavinshah free asked 6 years ago
Bootstrap 4 and Prototype are conflicting and when I click on tabs it hides other menus and tabs
therepairshack free answered 5 years ago
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.
Bartłomiej Malanowski staff answered 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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