jQuery popup box is not getting displayed

Question

I am trying to display a popup box from a div. My code is below.

Upon successful addition on record the div needs to be shown but its not working. I have tried $("#div").html.

Script:

<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
   $('#users').submit(function() {
      $('#response').html("<b>Adding...</b>");
      $.post('controller_adduser.php', $(this).serialize(), function(data) {
         $('#response').html("<b>Adding...</b>");

         //// Show div Message box

      }).fail(function() {
         alert( "Posting failed." );
      });
      return false;
   });
});
</script>

DIV:

<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title"><i class="icon-accessibility"></i> Loading remote path</h4>
            </div>
            <div class="modal-body with-padding">
               <p>Added!!</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>

POPUP MSG BOX

Answer 1

I see that youre using bootstrap. In order for the modal to show you need to run the .modal("show") command. I would try this: HTML:

<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title">
                     <i class="icon-accessibility"></i> 
                    <span id="response">Loading remote path</span>
               </h4>
            </div>
            <div class="modal-body with-padding">
               <p>Added!!</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>

JS:

<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
   $('#users').submit(function() {
      $.post('controller_adduser.php', $(this).serialize(), function(data) {
         $('#remote_modal #response').html("<b>Adding...</b>");
         $('#remote_modal').modal("show");
      }).fail(function() {
         alert( "Posting failed." );
      });
      return false;
   });
});
</script>