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

}   
});