bootstrap's modal ajaxform submit variables and image

Question

So,...currently I'm creating a form with some input text and image upload field and I'm using ajaxForm to handle the process and also using bootstrap 3 for the modal (this page I call form page). In this page also I will display all that data list from database.

The scenario is, when user click on a button, it will trigger the bootstrap modal to open (work perfectly) which the form is inside it. When user click on the submit button, the form will send all values of the fields to process page which is work perfectly.

All values send to process page perfectly and it return the success message in form page nicely, but it won't show newly inserted query. I need to refresh the page manually to show the newly added query. I don't know what's wrong with my code or the ajax.

For your info, I'm using ajaxForm plugin to handle the form (http://malsup.com/jquery/form/), Bootstrap and Jquery

this is my current code:

<div id="add_sku" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">*Some text here*</div>
<div class="modal-body">
<form id="addProduct" class="addnew" name="addProduct" method="post" enctype="multipart/form-data" data-ajax="true" action="add_product.php">
.... *the rest of the form field which is input text and image upload*
</div>
</div>
<div class="modal-footer" id="form">
<input name="submit" type="submit" class="btn btn-success" id="addpid" value="submit" />
<input name="Reset" type="reset" class="btn btn-default" value="Cancel" data-dismiss="modal" data-target="div#add_sku" />
</div></form>
</div></div></div>
</div>

and my js:

<script type="text/javascript">
  $(document).ready(function(e) {
    $('form#addProduct').submit(function(){
       var options={
    success:function(r){
    $('div#confirm').css('display','').html(r).delay(2500).slideUp('slow');
    $('div#add_sku').modal('hide');
    },
    clearForm:true,
    resetForm:true,
    type:'post',    
    }
     $(this).ajaxSubmit(options);
        return false;
      });
    e.preventDefault();
});
</script>

Answer 1

Finally after a bunch of try and error, I figure it out

updated version of my script & it works for me

$(function(e) {
    $('form#addProduct').submit(function(){
        $(this).ajaxSubmit({
            url:'add_product.php',
            type:'post',
            clearForm:'true',
            resetForm:'true',
            cache:'false',
            success:function(msg){                         
                $('div#confirm').slideDown("fast").html(msg).delay(2000).slideUp('slow');
                $('div#add_sku').modal('hide');
                $('div#showcase').load('show_product.php');
            },
            complete:function(){            
                $('form#addProduct').resetForm();
                $('form#addProduct').clearForm();
            },
            error:function(err){
                $('div#message').css('display','').html(err);
                $('form#addProduct').resetForm();
                $('form#addProduct').clearForm();
            },
        });
    return false;
}); 

Answer 2

if you are using jquery then this might help you.

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Answer 3

Try This:

 <script type="text/javascript">
    $('#addProduct').submit(function(){        
        $.post($(this).attr('action'), $(this).serialize(), function(res){
            $('#confirm').css('display','').html(res).delay(2500).slideUp('slow')                    
        }).fail(function() {
            alert( "error" );
        });

        return false; // preventing default
    });
  </script>

Remember to set form action : "add_product.php"