closing modal and making ajax call on underlying page to reflect changes carried out in modal

Question

Im using twitter boostrap and I have a form inside a modal. Here is the code for its submit function

jQuery("#testForm").validate({
   highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');

    },
    submitHandler: function (form) {
        alert('hi');
        $.ajax({
                 type: "POST",
                 url: "forms/test.php",
                 data: $(form).serialize(),
                 success: function (resp) {
                  alert(resp);
                 }
             });
        return false; // required to block normal submit since you used ajax     
    }
  });
 });

Basically I woudl like to do 2 things in the success function

1) close the modal and show the form underneath 2) make an ajax call to the page that had the button which opened the modal. This is to reflect any changes made by the form

Firttly i do not know how to close the modal programmatically and secondly i do not know if an ajax call in the success function would apply to the page loaded in the modal (which i am closing) or whether it would apply to the underlying page. Im trying to test it but I am new to all this and not getting far very fast.

Perhaps the ajax call doesnt have to be in the success function and make more more sense in some event called when the modal is closed. Naturally this code would have to check if the form had been submitted or not, perhaps my a variable used a a flag set in the success function. I'm sure you experts will know of a better way

Thanks in advance for sharing your expertise.

thanks

Edit

I can see how to detect an event when the modal is closed Bind a function to Twitter Bootstrap Modal Close but i do not know how to detect whether the form in the modal was submitted properly and the success function called

Edit 2

This is the html for the modal and I can't tell where the modal id goes as this does not work. Perhaps it is because the model is a panel too

        <div class="col-sm-6 col-md-4">
            <div class="panel panel-default panel-alt">
                <div class="panel-heading">
                    <div class="panel-btns">
                        <a href="" class="panel-close" id='close_button'>&times;</a>
                        <a href="" class="minimize">&minus;</a>
                    </div><!-- panel-btns -->
                    <h5 class="panel-title">Panel As Modal</h5>
                    <p>Easily add panel inside of a modal box.</p>
                </div>
                <div class="panel-body">
            <!--      <a href="modal_pages/modal_panel.php" class="btn btn-primary mr5" data-toggle="modal" data-target=".bs-example-modal-panel">Launch Modal</a> -->  
                       <a href="pages/add_customer.php" class="btn btn-primary mr5" data-toggle="modal" data-target=".bs-example-modal-panel" >Launch Modal</a>   
                </div>
            </div><!-- panel -->
        </div>


<div id="myModal" class="modal fade bs-example-modal-panel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content"></div>
  </div>
</div>





<script>
    jQuery(document).ready(function(){
        //
        $('#myModal').on('hidden.bs.modal', function () {
        alert('modal hidden');
});
    });
</script>

Answer 1

I do this on one of my sites. It's pretty straightforward. The modal is within the DOM so you can easily just serialize and post your form data like normal, then in your success function call:

EDIT:

$('#myModal').modal('hide');

Your Modal currently has an id of myModal. Don't forget to add or inject the content divs to the modal with the classes modal-header, modal-body, modal-footer, so that the css is applied and your modal displays nicely.

<div id="myModal" class="modal fade bs-example-modal-panel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
     <--Add your header here. -->
      </div>
      <div class="modal-body">
     <--Add your content here. -->
      </div>
      <div class="modal-footer">
     <--Add your footer here. -->
      </div>
    </div>
  </div>
</div>