-
-
Save havvg/3226804 to your computer and use it in GitHub Desktop.
jQuery(function($) { | |
$('form[data-async]').live('submit', function(event) { | |
var $form = $(this); | |
var $target = $($form.attr('data-target')); | |
$.ajax({ | |
type: $form.attr('method'), | |
url: $form.attr('action'), | |
data: $form.serialize(), | |
success: function(data, status) { | |
$target.html(data); | |
} | |
}); | |
event.preventDefault(); | |
}); | |
}); |
<!-- Bootstrap trigger to open modal --> | |
<a data-toggle="modal" href="#rating-modal">Write a Review</a> | |
<div class="hide fade modal" id="rating-modal"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal">×</button> | |
<h2>Your Review</h2> | |
</div> | |
<div class="modal-body"> | |
<!-- The async form to send and replace the modals content with its response --> | |
<form class="form-horizontal well" data-async data-target="#rating-modal" action="/some-endpoint" method="POST"> | |
<fieldset> | |
<!-- form content --> | |
</fieldset> | |
</form> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" class="btn" data-dismiss="modal">Cancel</a> | |
</div> | |
</div> |
riterrani
commented
Mar 4, 2014
Hi,
the code from @BurnedToast is OK but only at the first click on submit button cause, at the second click, two posts are sent, at the third, three, etc...
Is there any solution ?
My code :
$('.modal').on('submit', 'form[data-async]', function(e) {
var $form = $(this);
var enctype = $form.attr('id')
if(enctype == 'multipart') {
var formData = new FormData(this);
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(data, status) {
$('#remoteModal .modal-content').html(data);
}
});
}
else {
var submitButton = $("input[type='submit'][clicked=true], button[type='submit'][clicked=true]", $form);
var formData = $form.serializeArray();
if(submitButton.size() === 1) {
formData.push({ name: $(submitButton[0]).attr("name"), value: "1" });
}
else if(submitButton.size() !== 0) {
console.log("Weird, multiple submit-buttons pressed!");
}
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: formData,
cache: false,
success: function(data, status) {
$('#remoteModal .modal-content').html(data);
}
});
}
e.preventDefault();
});
$('.modal').on("click", 'input[type="submit"], button[type="submit"]', function() {
$('form[data-async] input[type=submit], form[data-async] button[type=submit]', $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Thank you so much!
I am trying to get this working with Bootstrap 3 and a form which is using jQuery Unobtrusive validation (in case that makes a difference). For some reason the form is performing a full page submit. I've added alerts to the script in multiple places but none are ever triggered.
Here is my code if anyone can see anything wrong?
jQuery(function ($) {
$('form[data-async]').on('submit', function (event) {
alert("async form");
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function (data, status) {
alert(status);
$target.modal('hide');
},
error: function (result) {
alert(result);
}
});
event.preventDefault();
});
});
I am using jquery-1.9.0.js. I notice just before the page submits that an error gets generated in the console as follows:
"Unexpected token u" and seems to break on the following line in the jQuery source:
return window.JSON.parse( data );
The value of data at this point is true but not sure where the value has come from.
@BurnedToast is working but @riterrani can close the modal after a submit is clicked!
simply awesome man!!!
@BurnedToast I try your code, but there is an issue here
$(document).on('submit', 'form[data-async]', function(event) {
if I change it to
$(document).on('submit', function(event) {
Works!
Hi, how to add loading indicator while saving?
@frozenade Put a div with id name of your choice and first line of the function add. In my example below I named the div id="processing"
$('#processing').html("<b>Saving...</b>");