Progressbar en javascript - rafraichir l'affichage dans une boucle javascript

Commenter

Contenu du snippet

Je cherchais un moyen d'afficher une progress bar montrant l'état d'avancement d'une boucle, dans laquelle on préparait le 'Query String' à envoyer à une page PHP. On parcourt les champs du formulaire et on ne garde que ceux dont la valeur est supérieure à 0.

Source / Exemple : 


<html>
<head>
<title>Exemple de progressBar en Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var destURL;
var pos;
var nbre;
var saved=false;

function save(){
destURL='save.php?';//Remplacez ceci par la page traitant les données envoyées
destURL=destURL+document.all.form1.elements[0].name+'='+document.all.form1.elements[0].value;//On y ajoute le contenu du premier element du formulaire
var obj = document.all['InputText'];//Ceci est le nom de la layer contenant la progressbar
str=obj.style.width;
num=str.substr(0,str.length-2)
obj.style.left = document.body.scrollLeft+(document.body.clientWidth-(num))/2;
str=obj.style.height;
num=str.substr(0,str.length-2)
obj.style.top = document.body.scrollTop+(document.body.clientHeight-(num))/2;
obj.style.visibility = "visible";
nbre=document.all.form1.length-1;
pos = 1;
progressbar(pos,nbre);
setTimeout(NoOP,10);

}

function progressbar(nbr,tot){
cellnbr=Math.floor((nbr*10) / tot);
if ((cellnbr>=0) && (cellnbr<10))
	{
	Tsave.rows[0].cells[cellnbr].style.background = '#9933FF';
	}
}

function NoOP(){
if (document.all.form1.elements[pos].value!=0)
	{
	destURL=destURL+'&'+document.all.form1.elements[pos].name+'='+document.all.form1.elements[pos].value;
	}
progressbar(pos,nbre);
pos = pos+1;
if (pos <= nbre)
	{
	setTimeout(NoOP,5);
	}
else
	{
	saved=true;
	window.location.href=destURL;
	}
}
function confirmation(){
if(confirm("Voulez-vous sauver avant de quitter?")){
	document.execCommand('Stop');
	save();
}
}
</script>
<body onUnload="if (!saved) confirmation();">
          <form name="form1" action="save.php" method="get" enctype="application/x-www-form-urlencoded" target="_self">
<input name="65-'ARD'-4-'OP 10'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 20'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 30'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 40'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 50'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 60'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 70'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 80'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 90'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 100'-1-86" type="text" size="2" value="0">
<input name="65-'ARD'-4-'OP 110'-1-86" type="text" size="2" value="0">
<!-- Remplissez le reste ... Chez moi c'est fait par un script PHP -->
<input style="width:100" value="Sauver" name="savebutton" type="button" onClick="save();">
</form>
<!-- PopUp BEGIN : début de la progressBar-->
<script language="JavaScript">
if (document.all) {
 document.writeln("<div id=\"InputText\" style=\"position:absolute; left:0px; top:0px; z-index:7; width:240px; height:70px; overflow: hidden; visibility: hidden; background-color: #FFFFFF; border: 1px none #000000\" >");
}
else if (document.layers) {
 document.writeln("<layer id=\"InputText\" pagex=\"0\" pagey=\"0\" width=\"200\" height=\"200\" z-index=\"100\" visibility=\"hide\" bgcolor=\"#FFFFFF\" onMouseOver=\"if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\" onMouseOut=\"ppcTI=setTimeout('hideCalendar()',500)\">");
}
else {
 document.writeln("<p><font color=\"#FF0000\"><b>Error ! The current browser is either too old or too modern (using DOM document structure).</b></font></p>");}
</script>
<noscript><p><font color="#FF0000"><b>JavaScript is not activated !</b></font></p></noscript>
<IFRAME id="iframe1" scrolling="no" name="iframe1" scroll="none" style="width:240px; height:70px;z-index:1"></IFRAME>
<!-- l'IFRAME sert à masquer les éventuels SELECT qui, sinon, restent devant les DIV, sans respecter le z-index -->
<div style="position:relative;top:-70px;z-index:9"> 
  <table width="240" height="70" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" vspace="0" hspace="0">
    <tr align="center" bgcolor="#CCCCCC"> 
      <td nowrap> <b><font face="MS Sans Serif, sans-serif" size="1">Sauvegarde 
        en cours</font></b> <table id="Tsave" width="200" height="20" border="1" cellpadding="0" cellspacing="1" bordercolorlight="#999999" bordercolordark="#FFFFFF" vspace="0" hspace="0">
          <tr align="center"> 
            <td bgcolor="#FFFFFF" height="18" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" height="18" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
            <td bgcolor="#FFFFFF" width="10%"></td>
          </tr>
        </table></tr>
  </table>
</div>
<script language="JavaScript">
if (document.all) {
 document.writeln("</div>");
 }
else if (document.layers) {
 document.writeln("</layer>");
 }
else {/*NOP*/}
</script>
<!-- PopUp END -->
</body>
</html>

Conclusion :


Il faudra faire quelques aménagements du code si on veut qu'il soit compatible NN4+. Si vous l'utilisez tel quel, il ne fonctionnera en effet qu'avec IE5+.

J'espère que ceci vous aura un peu aidé. Quand j'ai cherché comment faire ça sous Google, je n'ai rien trouvé.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.