Bootstrap modal opened via AJAX request "shown" event only triggered once

Question

I have a BS modal which when the dialog loads I query another URI and populate the contents.

When I open and close the modal, and re-open the "shown" event is not triggered and therefore the contents are not re-populated.

$('#ajaxModalPopup').on('shown.bs.modal', function (e) {
  // TODO: Load new contents - but only happens on first shown
});

The ID of the modal has to remain static, but I've tried, resetting the modal DIV container to NULL, then re-inserting the modal itself, hoping it would trigger the "shown" event again, but no dice.

Any thoughts?

EDIT | The modal will shown each time the "click" handler is invoked but the modal's own "shown" event won't fire more than once...

  $('.open-as-modal').click(function(ev){
                $.ajax({
                    url: this.href,
                    success: function(result){
                        $("#ajaxModalPopup").modal('dispose');
                        $("#modalContainer").html(result);
                    }
                }).done(function(){
                    $('#ajaxModalPopup').modal('show');
                });

               return false;
            });

This isn't firing more than once:

$('#ajaxModalPopup').on('shown.bs.modal', function (e) {
  // TODO: Query another URI and populate contents - only fired once???
});

Did you see my updated answer? That question you posted seems over kill when you can just use `$(document).on('shown.bs.modal', '#ajaxModalPopup', function (e) {`. — joshmoto, Nov 17 '20 at 20:53

joshmoto · Accepted Answer · 2020-11-18T23:43:34.253

To use bootstrap modal events on newly complete added/replaced modal html, you will need to define the modal id selector in the .on selector param, within the $(document) object.

$(document).on('shown.bs.modal', '#ajaxModalPopup', function(e)

See selector param usage in .on here https://api.jquery.com/on/

See comments in updated example code further down. Here is also a fiddle... https://jsfiddle.net/joshmoto/mvkq71ow/3/

This below example now gets complete modal html from remote file at...

https://gist.githubusercontent.com/joshmoto/bb7673e1beb9a004bed5102f234e227b/raw/c0d2335d31fc4ec7827e5768b8fd9893e3401847/ajax-modal.html

Upon ajax get success, replace the current <div id="ajaxModalPopup"></div> entirely with response modal html. Then fire .modal('show') on ajax .done...

// ajaxModalPopup button to fire ajax and get new modal html
$(document).on('click', '[name="ajaxModalPopup"]', function(e) {

  // jquery ajax call
  $.ajax({

    // get html file with entire #ajaxModalPopup html contents
    url: 'https://gist.githubusercontent.com/joshmoto/bb7673e1beb9a004bed5102f234e227b/raw/c0d2335d31fc4ec7827e5768b8fd9893e3401847/ajax-modal.html',
    type: 'GET',

    // on success response function
    success: function(modalHTML) {

      // log response
      //console.log(modalHTML);
      
      // replace the #ajaxModalPopup with newly added ajax modal html
      $('#ajaxModalPopup').replaceWith(function() {
        
        // return new ajax reponse modal html
        return modalHTML;
        
      });
       
    },

    // on fail response function
    error: function() {

      // console err
      console.log("json error");

    },


  }).done(function(){
  
    // now show the modal
    $('#ajaxModalPopup').modal('show');
      
  });

});

// ajax modal popup on shown
// changed scope so selector is in document
$(document).on('shown.bs.modal', '#ajaxModalPopup', function(e) {

  // console log this on shown.bs.modal function now hits
  console.log("newly replaced modal shown");

// ajax modal popup on hidden
}).on('hidden.bs.modal', '#ajaxModalPopup', function(e) {

  // console log modal hidden
  console.log("newly replaced modal hidden");

});

.modal-body {
  padding: 2rem;
  font-size: 4rem;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="container py-3">

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" name="ajaxModalPopup">
    Launch ajax demo modal
  </button>

  <!-- Modal -->
  <div id="ajaxModalPopup"></div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

Not quite. The problem I am having is the "shown" event is not being triggered more than once. I completely re-generate the whole modal each request. The dialog will re-insert into the DOM, but it's contents don't re-populate because it depends on the "shown" being triggered each time the dialog is shown...make sense? — Alex.Barylski, Nov 17 '20 at 19:57
I feel I need to re-attach the events when I dispose of the modal? I'm just not sure how... — Alex.Barylski, Nov 17 '20 at 20:17
I found a hack-ish work-around by adding a method inside the Modal, calling this in the open-as-modal.done() method seems to work consistently...I'll probably look into this as a better solution (https://stackoverflow.com/questions/9137311/how-to-extend-twitter-bootstrap-plugin) — Alex.Barylski, Nov 17 '20 at 20:25
I've updated my answer. The `Launch ajax demo modal` loads new modal html from my [github gist](https://gist.githubusercontent.com/joshmoto/bb7673e1beb9a004bed5102f234e227b/raw/c0d2335d31fc4ec7827e5768b8fd9893e3401847/ajax-modal.html) and then fires the modal open. You will see I am console logging the bs modal events for this newly added modal. — joshmoto, Nov 17 '20 at 20:33

Bootstrap modal opened via AJAX request "shown" event only triggered once

1 Answers1