3

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.

enter image description here

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.

enter image description here

  • I have also migrating from b2 to b3 with mootools and jquery, any good workaround?? window.addEvent('domready', function () { Element.prototype.hide = function () { if (this.hasClass('btn-group')) { return this; } this.setStyle('display', 'none'); }; }); – isabolic99 Sep 19 '14 at 14:40
5

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
    };
});
0

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.

  • Totally agree with you. The question is tightly related to 2.5. which still has a lot of dependencies on MooTools (such as the calendar). – Valentin Despa Sep 23 '14 at 8:48
0

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');
       });    
    };
});
  • Try it by creating a custom module. Hope it works. – Shiplu Aug 16 '15 at 8:22
0

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']);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.