JS : Enlever le gif après chargement

Fermé

matiou34 Messages postés 198 Date d'inscription mardi 22 avril 2008 Statut Membre Dernière intervention 27 janvier 2015 - 21 mars 2012 à 13:42
nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 - 21 mars 2012 à 16:25

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

A voir également:

JS : Enlever le gif après chargement
Js/adware.agent.cr ✓ - Forum Virus
Retour à la ligne js ✓ - Forum Javascript
Js/agent.piv ✓ - Forum Virus
Node js virus ✓ - Forum Virus
Exécuter un fichier js en ligne de commande - Forum Javascript

1 réponse

Réponse 1 / 1

nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
Modifié par nEm3sis le 21/03/2012 à 16:34

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/

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

Faire un echo dans un script JS

Cheval de Troie JS/Kryptik.I

'JS/Agent.TS' Qu'est ce que c'est ?

Discussions similaires

Newsletters