I was migrating a component from Bootstrap 2 to Bootstrap 3. I noticed a weird effect after opening and closing a button dropdown => the button disappears.
Upon investigating, it looks like jQuery is conflicting (similar to https://github.com/twbs/bootstrap/issues/3436) with Mootools. This is not a conflict in the general sense (it's not causing JavaScript errors in the logs).
jQuery is triggering a 'hide' event and MooTools is catching it first.
This is the only workaround I've found so far (opened for review):
// MooTools
window.addEvent('domready',function() {
Element.prototype.hide = function() {
alert('Intercepted');
// Do nothing
};
});
Don't use mootools.
It's already slated for removal in Joomla's roadmap, jQuery being the preferred core option and Bootstrap have made quite clear that Bootstrap is not intended to be run alongside other other javascript libraries.
In my case I solve this by doing following:
in html
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#link1" data-toggle="tab">Link1</a></li>
<li><a href="#Link2" data-toggle="tab">Link1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="link1">
LINK1
</div>
<div class="tab-pane fade" id="web_design">
LINK2
</div>
</div>
in js
window.addEvent('domready',function() {
Element.prototype.hide = function() {
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
};
});
Found this looking for a solution to this https://forum.joomla.org/viewtopic.php?f=706&t=903425&p=3474051#p3474051 the same issue with disappearing tabs on frontend editing unset mootools using these https://forum.joomla.org/viewtopic.php?t=813835
I think in may case it's unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-core.js']);
window.addEvent('domready', function () { Element.prototype.hide = function () { if (this.hasClass('btn-group')) { return this; } this.setStyle('display', 'none'); }; });