Form submitted, response via ajax - php

Question

Currently I have this, which works nicely - it's an email signup list which returns a successful response or error, as appropriate.
$.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.fadeIn(500, function() {
$('#display_block').html(response)
});
}
});
return false;
});
The form is in a div with ID "emailform" and the "display_block" is the response. What I need is for the response to automatically disappear after a short time and for the form to fade back in. I've tried a few things but nothing that has worked yet.
Any help on what to add to the above code would be appreciated.

Answer 1

Assuming your initial html is like,
<div id="emailform">
<form>
...
</form>
</div>
you can proceed like this,
.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
var backupHtml = $('#emailform').html();
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.html(response)
.fadeIn(500, function() {
$(this).fadeOut(5000,function(){
$('#emailform').html(backupHtml);
});
});
}
});

Answer 2

There is nothing inside display_block when you fade it in. Its just empty, I changed the code:
$.ajax({
type: "POST",
url: "mailing_list/mailing_list_add2.php",
data: dataString,
success: function(response) {
var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform
$('#emailform').html("<div id='display_block'></div>");
$('#display_block')
.hide()
.html(response) // New line!
.fadeIn(500,function (){ // After we finsish the fadeIn
$('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in
});​
}
});
return false;
});
I created a JSFiddle for you http://jsfiddle.net/XHkWr/1/

Answer 3

To do instead of all mumbo jumbo.
$('#emailform').html("<div id='display_block'></div>");
$('#display_block').hide().html(response).stop().fadeIn(500);

Answer 4

I would say, that this would be a correct solution:
$.ajax({
url: 'mailing_list/mailing_list_add2.php',
type: 'post',
data: dataString,
success: function(data, textStatus, jqXHR) {
var $emailForm = $('#emailform').html();
$('#emailform').html('<div id="display_block"></div>');
$('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() {
$('#emailform').html($emailForm);
});
return false;
},
error: function(jqXHR, textStatus, errorThrown) {
var $emailForm = $('#emailform').html();
$('#emailform').html('<div id="display_block"></div>');
$('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() {
$('#emailform').html($emailForm);
});
return false;
}
});
Result here: http://jsfiddle.net/p9URt/2/