I am using jQuery Validate with ajaxSubmit to post a multipart/form-data form to my CI controller.
//Form Submit functions
$('#newEventSubmit').click(function(s) {
$("#newEventForm").validate({
errorClass: "validattion",
validClass: "valid",
highlight: function( element, errorClass, validClass ) {
$(element).addClass(errorClass).removeClass(validClass);
},
unhighlight: function( element, errorClass, validClass ) {
$(element).removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) { },
submitHandler: function(form) {
var formObj = $(form);
var formURL = formObj.attr("action");
var formData = new FormData(this);
$(form).ajaxSubmit({
url: formURL,
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
dataType: "HTML",
processData: false,
success: function(data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
console.log(jqXHR);
console.log(textStatus);
}
});
}
});
});
My question is this, I have a hidden div which is a Hud that I want to display whilst the ajaxSubmit is processing. $( "#hud-overlay" ).show();
however when I put it into the click event the form stops processing and if I put this in the $(form).ajaxSubmit()
code it doesn't fire can any one tell me what I am doing wrong.
NB. I have also tried this, but to no avail.
$( document ).ajaxStart(function() {
$( "#hud-overlay" ).show();
});