JS : Enlever le gif après chargement Fermé

Question

Bonjour, 

J'ai un script :

$(document).ready(function(){
	$("#formulaire").submit(function(){
		document.getElementById('loading').style.display = 'inline';
		$.ajax({type:"POST", data: $(this).serialize(), url:"form.php",
			success: function(data){
				$("#post").html(data);
			},
                        error: function(){
			        $("#post").html('Une erreur est survenue.');
			}
		});
		
		return false;
	});
	
});

Je souhaite supprimer le gif "loading" une fois la requête terminée.
Pour faire cela j'ai ceci :

if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
    document.getElementById('loading').style.display = 'none';
    document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText;
}  

Problème : Je ne sais pas où le placer car à chaque fois, ou la requête ne s'exécute pas et le loading disparait où une fois la requête exécuté le loading reste en place.

Comment faire ?

Muchas gracias



Configuration: Windows 7 / Safari 535.11

nEm3sis · Answer

pour la question sur ou le placer c'est simple dans tes callback success et error   
$(document).ready(function(){ 
 $("#formulaire").submit(function(){ 
  document.getElementById('loading').style.display = 'inline'; 
  $.ajax({type:"POST", data: $(this).serialize(), url:"form.php", 
   success: function(data){ 
    $("#post").html(data); 
    $('#loading').hide(); 
   }, 
   error: function(){ 
    $("#post").html('Une erreur est survenue.'); 
    $('#loading').hide(); 
   } 
  }); 
  return false; 
 }); 
});
ps1 : le hide si tu ne connais pas -> https://api.jquery.com/hide/   
ps2 : vu que tu utilise jQuery tu peux remplacer le document.getElementById('id') par $('#id')   
ps3 : le xmlHttp.readyState tu n'as pas à l'utiliser vu que tu as les callback de jQuery   
ps4 : au lieu de $.ajax({type:"POST" tu peux utiliser https://api.jquery.com/jQuery.post/ c'est plus simple
ps5 : à la place de .style.display = inline tu peux utiliser .css('display', 'inline') voir même https://api.jquery.com/show/

JS : Enlever le gif après chargement

1 réponse

Discussions similaires