Listen for modal close event from another file

Can I listen for jquery modal close event from another file?

I created the modal in a different PHP file and when I use the event listener in my modal PHP file it works but when I use it like below it doesn’t work.

The modal hide function is called in the CreateUserModal.php. What I want to happen is when a user is created successfully the modal closes and triggers a JS function in the user.php page that gets all the users in the system.

Here is my user.php file

<body>
    <div>
        <div>
            <button class="btn btn-primary btn-md" id="add-user">
                <i class="fa fa-plus " aria-hidden="true"></i>
            </button>
            <div class="modal-container"></div>
        </div>
        <div id="userTable" style="color:black"></div>
        <script>
         $('#add-user').click(function(e) {
            var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
            $('.modal-container').load(url,function(result){
                $('#CreateUserModal').modal({show:true});
             });
         });
            $('#CreateUserModal').on('hidden.bs.modal', function() {
                console.log('Modal Has been closed');
            });
        </script>
    </div>
</body>

From here when the add-user button is clicked the modal is opened in the modal-container div. The code for that is:

CreateUserModal.php

<link rel="stylesheet" href="../../../styles/pageForms.css">
<div id="CreateUserModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="
      background-color: transparent;
      border: none;
      ">
      <div class="pageForms-form">
        <form  id="CreateUser" action="//centralamericanmanagement.000webhostapp.com/pages/CreateUser.php" method="POST">
          <h2>Create User</h2>
          <hr>
          <b style='color:red' id="errors"></b><br>
          <div class="form-group">
            <div class="row">
              <div class="col"><input type="text" class="form-control" name="FirstName" placeholder="First Name" required="required"></div>
              <div class="col"><input type="text" class="form-control" name="LastName" placeholder="Last Name" required="required"></div>
            </div>
          </div>
          <div class="form-group">
            <select class="form-control" id="role" name="role">
              <option value="">User Type</option>
              <option value="2">User</option>
              <option value="1">Admin</option>
            </select>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" name="email" placeholder="Email" required="required">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="Password" required="required">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg" style="width:100%;" name="submit" value="submit">Create</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
  $("#CreateUser").submit(function(e){
  
    e.preventDefault();
  
  
    $.ajax({
      type: 'post',
      url: '//centralamericanmanagement.000webhostapp.com/phpfiles/CreateUser.php',
      data:  $("#CreateUser").serialize(),
      success: function (data) {
         var obj = JSON.parse(data)
         if(obj['success'] == 0)
         {
             $("#errors").html(obj['message']);
         }
         if(obj['success'] == 1)
         {
            $('#CreateUserModal').modal('hide');
  
         }
       }
    });
  
  });
   
</script

Answer

You can use the Event-Listener on every Html-Element. For example your modal container. So you could just change this line:

<div class="modal-container"></div>

and give it an id

<div id="modal-container" class="modal-container"></div>

then you change the listener to

$('#modal-container').on('hidden.bs.modal', function() {
   console.log('Modal Has been closed');
});

Also wrap ‘$(document).ready(function() {}’ around the event listener initialization.

The problem is, that at the time the event listener ist created, the modal is probably not part of the page. So jquery can’t find it and can’t init the event listener.

Advertisement

Answer