I am using bootstrap 3.3.6 and i have the modal dialog code opens like this
<div id="myModalPositions" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">ACT</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script type="text/javascript">
$('.openStandings').on('click', function(e){
e.preventDefault();
$('#myModalPositions').modal('show').find('.modal-body').load($(this).attr('data-href'));
});
</script>
inside the myModalPositions
, the data-href
loads a file from the server which i am doing
so i added a code inside the data-href = url where i have the form and submit and added the ajax code inside that data-href file,
every time i am trying to submit, it is closing my modal dialog
This is the ode inside the data-href url
<form name="form1" id="form1">
<input type="text" name="name" id="name">
<button type="submit" class="btn btn-primary updateData" data-dismiss="modal">Proceed</button>
</form>
<script type="text/javascript" src="../jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$("#form1").submit(function (event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "proceed.cfm",
data: formData
}).done(function (data) {
console.log(data);
});
});
</script>
what i am doing wrong here
2
Answers
Your button in the form has attribute
data-dismiss="modal"
so it closes the modal.use data-backdrop="static"