Pop up Bootstrap modal on success AJAX call
27,135
Solution 1
<script>
$(function() {
$('#beta-signup').submit(function(event) {
event.preventDefault();
var formEl = $(this);
var submitButton = $('input[type=submit]', formEl);
$.ajax({
type: 'POST',
url: formEl.prop('action'),
accept: {
javascript: 'application/javascript'
},
data: formEl.serialize(),
beforeSend: function() {
submitButton.prop('disabled', 'disabled');
}
success: function(data) {
$('#your-modal').modal('toggle');
}
}).done(function(data) {
submitButton.prop('disabled', false);
});
});
});
</script>
After your done call back, add:
success: function(data) {
$('#your-modal').modal('toggle');
}
And make sure your modal has similar attributes as:
<div class="modal fade" id="your-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Solution 2
You have to add some elements.
HTML (Simple markup for the modal):
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body">
<p>Success message</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS (Add this code to your success return):
// Your code
}).done(function(data) {
submitButton.prop('disabled', false);
$('#myModal').modal({'show' : true});
});
Author by
Jonathan
Updated on September 10, 2020Comments
-
Jonathan over 3 years
I'm using Formkeep to do my forms, using AJAX to submit an email to their servers. What I'm getting stuck on is how do I pop up a bootstrap modal saying 'thanks' on the successful sending of an email address using AJAX.
Here's the script running the AJAX.
<script> $(function() { $('#beta-signup').submit(function(event) { event.preventDefault(); var formEl = $(this); var submitButton = $('input[type=submit]', formEl); $.ajax({ type: 'POST', url: formEl.prop('action'), accept: { javascript: 'application/javascript' }, data: formEl.serialize(), beforeSend: function() { submitButton.prop('disabled', 'disabled'); } }).done(function(data) { submitButton.prop('disabled', false); }); }); }); </script>
I'm a beginner at AJAX requests so any help will be greatly appreciated.
Thanks
-
Jonathan over 8 yearsThank you Mark, greatly appreciated.
-
Mark over 8 yearsNote* depending on your page set up, you'll probably want to add the style="hidden" to you modal.
-
Jonathan over 8 yearsHi @Mark I'm currently getting an 'Unexpected identifier' on the line with this "success: function(data) {"