Rafraichir une barre de progression

**legrandse** · 23/02/2017, 14h54

Bonjour à tous,

Je souhaite intégrer une barre de progression à mon site.

J'utilise pour cela la barre bootstrap.
Cependant, la démo ne dit pas tout et c'est bien normal.

Mais comment rafraichir la DIV lorsque qu'il faut utiliser un script php ?

Voici le code javascript que j'ai récupéré d'un exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
    $.get("test.php", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});
  </script>
 
 
 
</head>
 
<body>
<div class="progress progress-striped active" id="progressouter">
   <div class="bar" id="progress"></div>
</div>

L'attribut $.get récupère mon fichier test.php que voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$listbiker = $connexion->query("SELECT * FROM gghf_table  ");
			$row = $listbiker->rowcount();
			$data = $listbiker->fetch(PDO::FETCH_OBJ);
 
			for($i = 0 ; $i < $row; $i++ ) {
				echo $i;
			}

Mon code php est un simple exemple pour tenter comprendre le principe.

Dans ce cas la barre de progression affiche la suite 12345678....

Comment faire pour qu'elle s'affiche une progression colorée ?

Merci pour votre aide

**badaze** · 23/02/2017, 19h28

Est-ce que tu as copié les classes css des différents éléments car ce sont peut être elles qui font l'animation ?
Pour simuler l'avancement je passe un paramètre p à test9113b.php qui est alimenté par la variable pc.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript">
var pc = 0;
$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
 var a = Math.random();
    $.get("test9113b.php?a="+a+"&p="+pc, function(data){
      /* update the progress bar width */
   pc=pc+10;
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});
  </script>
</head>
 
<body>
<div class="progress progress-striped active" id="progressouter" style="width:250px;text-align:center">
   <div class="bar" id="progress" style="background-color:red"></div>
</div>
</body>
</html>

test9113b.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$p = $_GET['p'];
echo $p;
?>

**legrandse** · 27/02/2017, 10h04

Salut Badaze,

W-E prolongé, je n'ai pas su te répondre plus tôt.

Oui, tout le CSS est chargé correctement.

D'ailleurs si je prend un exemple de barre bootstrap elle s'affiche correctement.

Voici la page complète

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <title>download</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../style.css" type="text/css">
<script type="text/javascript" src="../bootstrap/js/jquery-1.11.3-jquery.min"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
    $.get("test.php", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');
 
      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});
  </script>
 
 
 
</head>
 
<body>
<div class="progress progress-striped active" id="progressouter">
   <div class="progress-bar" id="progress"></div>
</div>
 
 
 
</body>
</html>

Que dois-je ajouter à mon exemple pour que cela fonctionne correctement ?

Actuellement j'ai un fond de barre dans lequel est affiché la suite 12345678910....

Merci pour l'aide

**badaze** · 27/02/2017, 11h23

Bonjour,
As tu essayé le code que j'ai posté.

**legrandse** · 27/02/2017, 12h15

Oui, ton script affiche bien un fond de barre rouge de 250px de long.
Le % est également bien affiché et augmente indéfiniment.

Mais comment faire pour afficher la barre de progression qui se remplit progressivement jusqu'à 100%

Dans mon exemple le script php compte et affiche le décompte de tous les bikers présents dans la table.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$listbiker = $connexion->query("SELECT * FROM gghf_table  ");
			$row = $listbiker->rowcount();
			$data = $listbiker->fetch(PDO::FETCH_OBJ);
 
			for($i = 0 ; $i < $row; $i++ ) {
				echo $i;
 
			}

Comment faire dire au script que lorsque la fin du comptage est effectuée la barre est à 100% ?

**badaze** · 27/02/2017, 16h56

Je viens de réessayer le code que j'ai posté est sur IE11, Chrome et Firefox dans tous les cas il affiche Done quand il arrive à 100%.

Rafraichir une barre de progression

JavaScript

Vue hybride

Discussions similaires

Partager

Partager