UI Progressbar. Comment dois-je intégrer le composant dans mon code ?

Version imprimable

Bonjour à tous,
J'ai un problème avec l'utilisation de Jquery Progressbar dans un tableau:
Explication du problème

J'ai créer un tableau dynamique qui récupère les informations d'une base de donnée.
Mon tableau se remplit bien, aucun problème: j'ai toutes mes valeurs.
Mon problème est au niveau de l'intégration du progressbar de Jquery.

Je n'arrive pas a faire boucler ma progressbar dans mon tableau selon une valeur différente. La progressbar prend tjs en compte la première valeur et la copie dans tout mon tableau. Je n'arrive pas obtenir plusieurs progressbar différente dans le meme tableau.

Quelqu'un aurait il une idée pour pouvoir faire boucler ma progressbar pour que chaque progressbar s'adapte selon la valeur récupérée.

(j'ai essayé avec un ID pour l'appel de la fonction php de la progressbar, mais sans succès)

Je vous met un petit bout de code pour comprendre.

(boucle while en haut du tableau, j'ai mis que la partie qui nous intéresse)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <td> <div class='progressbar'> <input type="hidden" name="test" id="progression<?php echo $row[0];?>" value="<?php echo$chiffre;?>"> </div> <?php echo"<script type=\"text/javascript\"> var temp=parseInt(document.getElementById('progression').value); $(function(){ $(\".progressbar").progressbar({ value:temp,});});</script>" ?>
Merci d'avance de votre aide.

17/03/2010, 11h08
danielhagnoul

Bonjour.

Avec jQuery nous sommes en présence d'une bibliothèque JavaScript et non sur le serveur avec un langage comme PHP. Dans votre intervention, vous devez donc inclure uniquement le code JavaScript tel qu'il apparaît dans votre navigateur.

Compte tenu de ce qui précède, du fait que je débute en PHP, et si j'ai bien compris ; vous voulez obtenir plusieurs « progressbar», chacune affichant une valeur différente. Il vous faut donc, pour chaque barre :

Code:

<div id="progressbarXXX"></div>

et un appel :

Code:

$("#progressbarXXX").progressbar({value: temp});

Le XXX étant un numéro d'ordre, car un id doit être unique.

Je pensais également à la même chose au début.

J'ai déjà essayé et le problème est le même.

////////////////// code source de base ///////////////////
Code:

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 <div id="progressbar<?php echo $row[0];?>"> <input type="hidden" name="test" id="progression" value="<?php echo $chiffre;?>"> </div>  <script type="text/javascript"> var temp=parseInt(document.getElementById("progression").value); $(function() { $("#progressbar<?php echo $row[0];?>").progressbar ( { value:temp, }); }); </script> </td> ////////////////// code source de base ///////////////////
Et je te donne le code généré dans mon navigateur:
Code:

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 <div id="progressbar147"> <input type="hidden" name="test" id="progression" value="7.69"> </div>  <script type="text/javascript"> var temp=parseInt(document.getElementById("progression").value); $(function() { $("#progressbar147").progressbar ( { value:temp, } ) ; });
Mes progressbar ont tous la même valeur. (la première de mon tableau)

Edit: J'ai également essayé de rajouter un id sur id="progression" , même effet que avec le progressbar.

Peut être un problème d'initialisation de la variable temp ?
Si quelqu'un peut m'aider.

Merci

Bonsoir.

Un exemple en JavaScript :

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css"/>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Bitstream Vera Serif Bold", serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		td {
			width:400px;
			height:40px;
		}
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script charset="CP-1252" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script>
		$(function(){
			$("div.progressbar").each(function(i, item){
				// attention, il ne faut pas mettre de virgule après la valeur !
				// le progressbar va de 0 à 100 %
				$(item).progressbar({ value: $(item).next("input.progression").val() });
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<table>
			<tbody>
				<tr>
					<td>
						<div class="progressbar"></div>
						<input class="progression" type="hidden" value="99.28"/>
					</td>
				</tr>
				<tr>
					<td>
						<div class="progressbar"></div>
						<input class="progression" type="hidden" value="75.56"/>
					</td>
				</tr>
				<tr>
					<td>
						<div class="progressbar"></div>
						<input class="progression" type="hidden" value="50.42"/>
					</td>
				</tr>
				<tr>
					<td>
						<div class="progressbar"></div>
						<input class="progression" type="hidden" value="25.37"/>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>  
</html>