0

we have a micro front end application implemented via different framework, Ember, React etc.

Some of these rely still on jQuery and bootstrap and each micro app loads the specific jQuery/bootstrap JS combination

All good, until we need to unload one micro frontend and loads another one for a different URL

Sometimes the bootstrap dropdowns event are not working and it'd be for some old "now" broken event handler

This is a super minimal replication. If you click a couple of times on the reload script button the dropdown is not working anymore

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
  <script>
function removeJS(filename){
    var tags = document.getElementsByTagName('script');
    for (var i = tags.length; i >= 0; i--){ //search backwards within nodelist for matching elements to remove
        if (tags[i] && tags[i].getAttribute('src') != null && tags[i].getAttribute('src').indexOf(filename) != -1)
            tags[i].parentNode.removeChild(tags[i]); //remove element by calling parentNode.removeChild()
    }
}
function addScript( src ) {
     var s = document.createElement( 'script' );
     s.setAttribute( 'src', src );
     document.body.appendChild( s );
}
function reload() {
    
    $(document).off('.dropdown.data-api');
    $(document).off('bs.button.data-api');
    $(document).off('click');
    $(document).off('focusin');
    $(document).off('focusout');
    $(document).off('keydown');
    $(document).off('focusin.bs.modal');
    $(document).off('focusout.bs.modal');
    $(document).off('mousedown');
    $(document).off('mouseup');
    $(document).off('load');    
    $(document).off('focus');
    $(document).off('blur');
    $(document).off('click.bs.dropdown');
    
    
    removeJS("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js");
    removeJS("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js");
    
    addScript("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js");
    addScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js");
}
  </script>
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script> -->
</head>
<body>

<div class="container">
  <h2>Dropdown Example</h2>
  <p>The data-toggle="dropdown" attribute is used to open the dropdown menu.</p>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>    
    </ul>
  </div>
  <button class="btn btn-primary" type="button" onclick="reload();">reload script</button>
</div>

</body>
</html>

On the reload function we have tried to clean up all the old events from jQuery and the Boostrap ones but the dropdowns still isn't working after 2-3 reloads

Any idea pls? Sandbox with the same code: https://codesandbox.io/s/festive-volhard-hbjm8?fontsize=14&hidenavigation=1&theme=dark

teRACHetHE
  • 1
  • It keeps working when your remove all the .off() statements. Tested with over 500 clicks, it keeps working. With the .off() statements it breaks after around 20-30 clicks, fast clicks. – Grumpy Jan 20 '21 at 14:32
  • No, click ONCE on reload script and THEN check the dropdown. Normally after 2 reloads and checks, it doesn't work anymore. If you reload again, it does – teRACHetHE Jan 20 '21 at 14:38
  • Hence why we think that there is somewhere a spurious click handler that get set first time, all good. Reloads breaks it and then next reload will overwrite the previous 2 (one working, one no) – teRACHetHE Jan 20 '21 at 14:41
  • check this answer https://stackoverflow.com/questions/6738380/best-way-to-load-and-unload-js-file-via-jquery – Grumpy Jan 20 '21 at 21:06

0 Answers0