Close Modal bootstrap window after insert in database - php

Question

I have modal bootstrap window that insert data in database using AJAX and JQUERY but I couldn't close window after insert and I want also to show message like Successfully inserted see below code
---- modal window ----
<!-- Modal employer-->
<div class="modal fade" id="employer" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form" action='insert.php' method='post' id='myform'>
<div class="form-group">
<label for="exampleInputEmail1">Nom</label>
<input type="text" name="nom"class="form-control"
id="exampleInputEmail1" placeholder="Nom"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Prenom</label>
<input type="text" name="prenom" class="form-control"
id="exampleInputPassword1" placeholder="Prenom"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">telephone</label>
<input type="text" name="telephone"class="form-control"
id="exampleInputPassword1" placeholder="telephone"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Fonction</label>
<input type="text" name="fonction" class="form-control"
id="exampleInputPassword1" placeholder="Fonction"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Salire</label>
<input type="text" name="salaire" class="form-control"
id="exampleInputPassword1" placeholder="Salire"/>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" id='insert' class="btn btn-primary">
Save changes
</button>
</form>
</div>
</div>
</div>
</div>
---- insert.php ----
<?php
require('config.php');
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$telephone = $_POST['telephone'];
$fonction = $_POST['fonction'];
$salaire = $_POST['salaire'];
$sql = "insert into employer (nom, prenom,telephone,fonction,salaire) values ('$nom','$prenom','$telephone','$fonction','$salaire')";
if(mysqli_query($con, $sql)){
echo 'success';
?>
<script type="text/javascript">
$(document).ready(function(){
$('#employer').modal('hide');
});
</script>
<?php
}
?>
---- insert.js----
$('#myform').submit(function(){
return false;
});
$('#insert').click(function(){
$.post(
$('#myform').attr('action'),
$('#myform :input').serializeArray(),
function(result){
$('#result').html(result);
}
);
});

Answer 1

When you get your response from ajax request then close modal window.
$('#employer').modal('hide');
As according to your example:
$('#insert').click(function(){
$.post(
$('#myform').attr('action'),
$('#myform :input').serializeArray(),
function(result){
$('#employer').modal('hide'); // ADD CODE FOR CLOSE MODAL
$('#result').html(result);
}
);
});

Answer 2

Try this:
$('#modal').modal('close');
It will close the modal.