How can I perform Jquery function during AJAX

Question

I am using Jquery AJAX to post a form on my page. I want to hide a div whilst AJAX is being performed and show it again when AJAX is a success.

How can I do this?? Check my code here:

$(document).ready(function(){
$("form#microblogpost").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var postmessage = $('#message1').attr('value');
var from_user = $('#from_user').attr('value');
var from_username = $('#from_username').attr('value');
$.ajax({
type: "POST",
url: "process.php",
data: "postmessage="+ postmessage +"& from_user="+ from_user +"& from_username="+ from_username,
success: function(){

}
});
return false;
});
}); 

Answer 1

Hide the element when you do the $.ajax() call, and show it again in the success callback. To make sure, add a error callback doing the same thing so the element gets show if the request fails.

error: function(){
  ... code to show the element
}

Answer 2

Hide at the beginning of the submit, and if successful, show.

$(document).ready(function(){
    $("form#microblogpost").submit(function() {
        $("#yourDivId").hide();
        // we want to store the values from the form input box, then send via ajax below
        var postmessage = $('#message1').attr('value');
        var from_user = $('#from_user').attr('value');
        var from_username = $('#from_username').attr('value');
        $.ajax({
            type: "POST",
            url: "process.php",
            data: "postmessage="+ postmessage +"& from_user="+ from_user +"&from_username="+ from_username,
            success: function(){
                $("#yourDivId").show();
            }
        });
        return false;
    });
});