jQuery fadeIn fails with jqQuery form-plugin
Question
I have a message that I want to fadeIn when a form is successfully send. I'm using the jQuery form plugin and the code:
$(document).ready(function() {
var options = {
target: '#output',
beforeSubmit: validate,
resetForm: true
};
$('#holdform').ajaxForm(options);
});
The validate function works perfectly so i added this code before it returns true:
(...)
$('#output').fadeIn('slow');
return true;
}
This should fadeIn the div I have underneath the form, styled as display: none;.
But what happens is that the div fades in and then disappears. Does anyone have an explanation and possibly a solution to fix it? Thank you in advance!
The code can be seen in it error-action here: http://gadebold.dk/events/tilmeld/
Solution
What's happening is the content is being replaced. You're fading in the #output
div, but when the server response comes back, the form plugin is putting that response in #output
because that's what you have the target set to.
If you don't care about the server response, just remove the target
option and it won't replace it's content, like this:
$(document).ready(function() {
var options = {
beforeSubmit: validate,
resetForm: true
};
$('#holdform').ajaxForm(options);
});