JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

CSS

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

JavaScript

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

  // jquery ajax call
  $.ajax({

    // get json file with emojis 
    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;
        
      });
      
      // now show the modal
      $('#ajaxModalPopup').modal('show');
      
    },

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

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

    },


  });

});

// 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("modal hidden");

});