Affichage de div lors de chargements

Bonjour,

J'aurais besoin d'aide pour un souci que je n'arrive pas à comprendre svp...

J'utilise une fonction très simple en javascript qui permet de faire patientez les utilisateurs pendant un httprequest ou une boucle js. J'affiche ou cache une div avec transparence et gif animé sur la totalité de ma page.

Voici le code, comme dit plus haut, très basique.

function WhiteWall(){	
	document.getElementById("waiting").style.display="block";
};
function notWhiteWall(){	
	document.getElementById("waiting").style.display="none";	
};

Et la fameuse div :

<div id="waiting" class="transparent">
		<table height="100%" width="100%">
			<tr>
				<td>
					<table align="center" style="vertical-align:middle;">
						<tr>
							<td align="center" valign="middle">
								<img src="/images/wait.gif" align="absmiddle"><br> <b>Veuillez patienter...</b>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>

Mon souci est que sous IE9-10-11 cette div ne s'affiche pas toujours. Si je met une alert(), elle a le temps de s'afficher sinon, ca passe directement aux scripts en dessous.

Voici un exemple précis de script pour lequel ça ne fonctionne pas (alors que firefox c'est ok) :

function SaveAsPan(){
    if (cartgrid.getRowsNum()==0)	{
		alert("Le panier est vide");
	} else {
		[b]WhiteWall();[/b]

			var vstatus;
			ischange = false;
			if(document.getElementById('pantype').checked==true){
				vstatus = "&O_PANIER.F_PANIERTYPE=Oui";
			} else {
				vstatus = "&O_PANIER.F_PANIERTYPE=Non";
			};
			s = "http://..."+vstatus;
			loader = dhtmlxAjax.getSync(s);
			s = loader.xmlDoc.responseText;
			pansid = s;
			//alert(pansid);
			if(vstatus=='&O_PANIER.F_PANIERTYPE=Oui'){
				var ind = 0;
				toolbar.forEachListOption('new', function(optionId){
					ind = ind+1;
				});
				toolbar.addListOption('new', pansid, ind, 'button', document.getElementById("O_PANIER.F_LIBELLE").value, 'flag_blue.png');
			};
			cartgrid.forEachRow(function(rowId){
				recstat = cartgrid.cellById(rowId,11).getValue();
				if(recstat!='delete'){
					m = "http://..."
					loader = dhtmlxAjax.getSync(m);
					m      = loader.xmlDoc.responseText;
				}
			});
			d.setText('PAN'+pansid.substring(7,12)+' - '+document.getElementById("O_PANIER.F_LIBELLE").value+' (Sauvegardé)');
			document.getElementById('obj_lnk_blc').style.visibility='visible';
			document.getElementById('btnsubmit').style.visibility='visible';
			majCount();
			dhxWins2.window("w2").close();
			ischange=false;
			[b]notWhiteWall();[/b]
			dhtmlx.message({
				text:"<span style='color:#00AEEF'>Le panier à été sauvegardé.</span>",
				expire:2000
			});

	};
};

Est ce que quelqu’un a une idée svp?
Loïc
Modifié par loic74 (29 Jul 2014 - 08:49)

Bonjour,

Il est possible que les appels à Ajax ne soient pas synchrones selon les circonstances et selon les navigateurs (multiples requêtes, plantage javascript "silencieux", ...). Difficile de tester en l'état ton code vu qu'on n'en a qu'une partie.

Pour tracer, au lieu d'utiliser une alerte, tu peux ajouter un <div id="trace"></div> quelque part dans ta page et ensuite faire un document.getElementById("trace).innerHTML="un message quelconque"; (ou même un document.getElementById("trace).innerHTML=document.getElementById("trace).innerHTML+"<br>"+"un message quelconque"; si tu as plusieurs messages à afficher) au lieu d'un alert("un message quelconque"). Tu verras ainsi mieux où ça peut planter car quand tu fais un alert(), ça peut par exemple laisser le temps à du code asynchrone de finir son travail et donc cacher des dysfonctionnements.

Amicalement,

Bonjour et merci parsimonhi.

Ta solution de traçage me plait bien, mais elle me laisse encore plus dans le flou...
En effet les différents éléments en place s'inscrivent dans le bon ordre mais tout d'un coup après avoir terminé les boucles et httprequest...

Je n'ai aucune idée de comment résoudre ça.
Tu n'aurais pas une autre idée?

Encore merci pour l'astuce précédente.