Comment utiliser jquery ajaxstart et ajaxstop avec $ .post?

Question

Fondamentalement, je veux montrer un gif de chargement ...

est ici le code que je utilise:

$("#mail-change input[type=submit]").click(function(event){ 

$.post('user_settings.php', $("#mail-change").serialize(), function(res) { 

$(res).insertBefore(".grey"); 

}, 'html') 

}); 

Answer 1

$("#loading").ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
}); 

EDIT:

$("#mail-change input[type=submit]").click(function(event){ 
    $("#loading").show() 
    $.post('user_settings.php', $("#mail-change").serialize(), function(res) { 
     $(res).insertBefore(".grey"); 
     $("#loading").hide(); 
    }, 'html'); 
}); 

ou:

$.ajax({ 
    url : 'user_settings.php', 
    data: $("#mail-change").serialize(), 
    beforeSend: function(){ 
    $("#loading").show(); 
    }, 
    complete: function(){ 
    $("#loading").hide(); 
    }, 
    success: function(res) { 
    $(res).insertBefore(".grey"); 
    } 
}); 

Voir:

• http://api.jquery.com/ajaxStart/
• http://api.jquery.com/ajaxStop/
• http://docs.jquery.com/Ajax_Events
• http://api.jquery.com/category/ajax/global-ajax-event-handlers/