Problème avec document.getElementById et Ajax

30 nov. 2008, 15:07

Bonjour,

Voilà je suis en train de créer un panier qui fonctionne avec Ajax et Php.

Voici mon fichier js:

var caddie = {
	id: "caddie",
	txt: "txt",

	XmlHttpRequest: function() 
	{
		if(document.all)
		{
			//Internet Explorer
			return XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
		}
		else
		{
			//Mozilla
			return XhrObj = new XMLHttpRequest();
		}
	}	
};

caddie.getAdd = function(name, code, qte, price, wallpaper, self) 
{
	setTimeout(this.selfAdd(name, code, qte, price, wallpaper, self), 8000);
	
	document.getElementById("loading").style.display = "block";
}

caddie.getDelete = function() 
{
	setTimeout(this.selfDelete(), 8000);
	
	document.getElementById("loading").style.display = "block";
}

caddie.selfAdd = function(name, code, qte, price, wallpaper, self) 
{
	var XhrObj = this.XmlHttpRequest();
	
	XhrObj.open('GET', 'ajout_panier.php?type=add&name='+name+'&code='+code+'&qte='+qte+'&price='+price+'&wallpaper='+wallpaper, true);

	XhrObj.onreadystatechange = function()
	{
		if (XhrObj.readyState == 4 && XhrObj.status == 200)
		{
			document.getElementById("loading").style.display = "none";
			
			document.getElementById(this.id).style.visibility = "visible";
			document.getElementById(this.txt).innerHTML = XhrObj.responseText;
		}
	}

	XhrObj.send(null);
}

caddie.selfDelete = function() 
{
	var XhrObj = this.XmlHttpRequest();
	
	XhrObj.open('GET', 'ajout_panier.php?type=delete', true);

	XhrObj.onreadystatechange = function()
	{
		if (XhrObj.readyState == 4 && XhrObj.status == 200)
		{
			document.getElementById("loading").style.display = "none";
			
			document.getElementById(this.id).style.visibility = "visible";
			document.getElementById(this.txt).innerHTML = XhrObj.responseText;
		}
	}

	XhrObj.send(null);
}

Et voici comment je l'utilise:

Code : Tout sélectionner

// Pour ajouter un article
<a href="#" onclick="caddie.getAdd('Reference1', '1589623', document.form1.qte_1.value, '152.00', '0', 'liste_article.php');">Ajout Panier</a>

// Pour vider le panier
<a href="#" onclick="caddie.getDelete();">Vider le Panier »</a>

Les article s'ajoute bien et le panier ce vide bien mais les div qui sont censé s'afficher ne s'affiche pas.

Voici le code de mes div:

Code : Tout sélectionner

<div id="loading" style="display:none;">Chargement</div>
<div id="caddie" style="visibility:hidden; border:#000 solid 2px;"><div id="txt"></div></div>

Le div loading de s'afficher et lancer la fonction caddie.selfAdd après 8 secondes mais là la fonction selfAdd se lance toute suite et la div loading ne s'ffiche pas, idem pour la div caddie.

Je ne trouve pas le pourquoi.

Merci d'avance.

Problème avec document.getElementById et Ajax

Qui est en ligne