CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-modal
FrenkyB
FrenkyB

Reputation: 7197

Trigger event after bootstrap modal is full loaded in GUI

I am opening bootstrap modal with:

$('#myModal').modal({ remote: '/AccountsContact/ModalAssignCustomer?iACCO_KEY=' + iACCO_KEY });

My problem is that I need to read some values from modal. I would like to do that, when modal is finished loading and shown in the GUI. (before modal is shown in the GUI controls inside modal are not generated yet).

I know for this event:

    $(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

but problem here is that event is triggered before modal is loaded on the GUI - thus all the fields inside modal are not generated yet and I am not able to read from them.

Is there a way to trigger event after modal is fully loaded inside GUI and all controls inside modal visible?

Upvotes: 3

Views: 6063

Answers (2)

Shalin Patel
Shalin Patel

Reputation: 1099

Please see the below code, which might help you.

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal("show");
    });
        $("#myModal").on('shown.bs.modal', function () {
            alert('The modal is fully shown.');
            $(this).find('p').text("This is changed text after alert");
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
  <h2>Modal Events - shown.bs.modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>The <strong>shown.bs.modal</strong> event occurs when the modal is fully shown.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div> 
</div>

Upvotes: 3

Robert
Robert

Reputation: 6967

The event that you're looking for would be loaded.bs.modal, which triggers after remote data has been fully loaded.

As noted in my earlier comment, remote was depreciated in 3.3.0 and fully removed in version 4.x. You can replicate the functionality pretty simply with a bit of jQuery and I encourage you to explore the innumerable solutions here on SO. My personal preference is something like the below code:

$('body').on('click', '[data-toggle="modal"]', function(){
  $($(this).data("target") + ' .modal-dialog').removeClass('modal-lg').removeClass('modal-sm').addClass('modal-' + $(this).data("size"));
  $($(this).data("target") + ' .modal-content').load($(this).attr("href"));
});

In the above example the modal trigger is bound to body so you can access it via elements generated outside the DOM. You can still use data-toggle and specifying a remote URL is as simple as defining the href attribute, though this does limit you to <a> as the trigger (though it could easily be modified).

The first thing the above code does though, is remove any sizing classes on the modal and clears any pre-existing modal content since it relies on a single modal dialog box to populate.

I also like to specify which size modal box should be activated via data-size so the above code reflects that as well. Again... a lot of personal preference going on in that option.

Upvotes: 2

Related Questions