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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 035 fois - Téléchargée 32 fois

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

Ajouter un commentaire

Commentaires

Signaler
the_wwt
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
 1 -
Bonjour,
une alternative pourrait être ce bout de code:
http://www.javascriptfr.com/codes/PROGRESS-BAR-WIDGET_45586.aspx
Cordialement.
Signaler
kankrelune
Messages postés
1305
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
 -
remplacer les deux...

if (document.all)

par

if (document.all || document.getElementById)

comme ça c'est compatible avec Firefox... .. .

@ tchaOo°
Signaler
la_pin
Messages postés
277
Date d'inscription
mercredi 11 août 2004
Statut
Membre
Dernière intervention
15 décembre 2005
 -
c'est bien mais il y a un probleme...
quand on quitte, le script demmande "Voulez-vous sauver avant de quitter?" APRES que la page ce soit fermée !
Signaler
fg85
Messages postés
370
Date d'inscription
dimanche 28 mars 2004
Statut
Membre
Dernière intervention
13 avril 2007
 -
Beau code , continue ;-)
Signaler
cs_minta
Messages postés
30
Date d'inscription
samedi 1 février 2003
Statut
Membre
Dernière intervention
9 octobre 2007
 -
Il serait intéressant que tu mettes toutes ta source dans le secteur php.
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.