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/

Answer 1

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);
});

See here for a full list of options