Meu loop para gerar progressbar com table não carrega

[cristianomg 0]

Beleza pessoal,

 

Estava vendo sobre progressbar em php, e encontrei uns exemplos e adaptei ao meu sisteminha.

Tenho um loop que pega os dados da tabela e gera uma tabela onde o campo STATUS é o progressbar.

 

O progress funciona na primeira linha , mas quando gera a segunda linha ele não mostra. Mas como uso o while ele pega novos dados mas não gera o progressbar, na tag que exibe o progressbar eu coloquei o valor que corresponde ao tamnho de % do progress e na segunda linha apresentada o valor é apresentando mas o efeito de preencher o progress não é gerado.

 

Segue abaixo um exemplo do meu código

 <table style="border:0px solid #ff0000;">		   <tr style="border:1px solid #ff0000;">		   		   <?php 		   $i = 1;				include "include\conexao.php";	//$sql = mysql_query("SELECT u.id as id , u.nome_pessoa AS nome, u.foto AS foto, u.email as email, u.status as status FROMb lá blá blá ");						while( $ln = mysql_fetch_array($sql) )	{	$id 		 =  $ln["id"];	$nomeprojeto	 =  $ln["nomeprojeto"];	$nomestorie	 = $ln["nomestorie"];	$nomesprint 	 = $ln["nomesprint"];	$status 	 = $ln["status"];	$entrega 	 = $ln["entrega"];	$i++;//contador para gerar nome diferente				?><style>        .barra<?php echo $i?>-area {	margin:10 auto;	position:relative;	display:block;	width:70px	border: 1px solid #00ffff;}        .barra<?php echo $i?> {	position:relative;	display:block;	width:100%;	background-color:#eee;	padding:3px;	-webkit-border-radius:3px;	-moz-border-radius:3px;	-o-border-radius:3px;	border-radius:3px;	-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2);	-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2);	-o-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2);	box-shadow:inset 0 1px 3px rgba(0, 0, 0, .2)}       .carga<?php echo $i?> {	border: 1px solid #00ffff;	height:20px;	display:block;	background-color:#3498db;	width:0%;	-webkit-border-radius:3px;	-moz-border-radius:3px;	-o-border-radius:3px;	border-radius:3px;	-webkit-transition:width .8s ease;	-moz-transition:width .8s ease;	-o-transition:width .8s ease;	transition:width .8s ease}</style>	<td style="border:0px solid #ff0000; width:170px; font-size:12px;"><?php echo $nomeprojeto?></td><td style="border:0px solid #ff0000; width:215px; font-size:10px;"><?php echo $nomestorie?></td><td style="border:0px solid #ff0000; width:210px; font-size:12px;"><?php echo $nomesprint?></td><td style="border:0px solid #ff0000; width:70px; font-size:16px;   font-weight:bold; color:#0000ff; text-align:center; "><div class="barra<?php echo $i?>-area" style="background-color:#ccc;"><div class="barra<?php echo $i?>" style="background-color:#ccc;"><span class="carga<?php echo $i?>" style="font-size:12px; color:#fff;"><?php echo $status;?>%</span></div></div>						<script>	var width = 78;	var tempo = 100;	var carga<?php echo $i?> = document.querySelector('.carga<?php echo $i?>');	var barra<?php echo $i?> = setInterval(function(){			    width = width + 1;			    carga1.style.width = width + '%';   				if (width === 100){ 				        clearInterval(barra<?php echo $i?>);				        width = 78;    				}				},tempo);				</script>				</td><td style="border:0px solid #ff0000; width:60px; font-size:12px;   font-weight:bold;  text-align:center; "><?php echo $entrega;?></td></tr><tr style="border:1px solid #ff0000; heigth:50px;">	   		   <?php }?>				   		   		   </table>

Eu identifiquei que para gerar os progress em todas as linhas , o CSS de "barra" e "carga" devem ser de "nomes diferentes", então eu pensei em fazer uma gambiarra, e colocar um contadar no fim de cada nome "barra<?php $i;?>" , carga<?php $i;?>

onde logo terminar o primeiro loop, os nomes trocariam para :

 

barra<?php $i;?> = barra2

carga<?php $i;?> = carga2

 

Nos estilos, no javascript e nas Div's

 

Mas não funcionou, então, como eu poderia para fazer gerar a barra de progress dentro de um loop que mostra dados tabelas e preenche o progress independente de cada linha que tem seu valor "x".

 

 

Espero ter sido claro.... :innocent:

 

 

Alguém sabe alguma maneira de burlar isso, ou usar progressbar, em loop while?

[joeythai 0]

Cara tenho que fazer um esquema desse também, se encontrar alguma coisa me avise hein. Vou correr atrás disso também, qualquer coisa posto aqui se achar também.

[LuccasCardial 0]

Explique melhor sua situação...

Essa segunda linha, o que exatamente deve conter?

E como ela é "inserida" no documento? Via Ajax, iFrame?

[cristianomg 0]

Opa, consegui resolver não com queria com uma progressbar interativa, mas deu pro gasto, segue minha solução.

Dentro do meu while, na linha da table que irá mostrar o progressbar inseri assim:

<tr >
<td style=" width:250px; ">
   <h2 style="font-size:11px; color:#585858;"><?php echo $nome_tarefa;?></h2></td>
<td style=" width:250px; "><h2 style="font-size:11px; color:#585858;"></h2>
<!-- AQUI COLOCO O PROGRESSBAR -->
  <div class="progress progress-striped" style="margin-top:0%;width:200px; height:15px; margin-left:10px;   " >
<!--AQUI O ECHO $perct, informa o calculo de preenchimento da barra progressbar -->
	<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="<?php echo  $perct;?>" aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $perct;?>%;">
									<span style="color : #fff; margin-left:10px;"><?php echo number_format($perct,2,",","");?>%</span>
								</div>
							</div>
					</td>
					</tr>

Passando o CSS deste progressbar, com tom de cor verde, para fazer uma validação de progressbar , abaixo do esperado por exemplo, deveria estar 45% e está 18%, vale apena fazer uns if, trocando o estilo css do progressbar...falta implementar isso.

Mas o pior esta feito.

.progress {background: rgba(171, 183, 199, 1); background: -webkit-linear-gradient(top, rgba(245, 245, 245, 1) 0%, rgba(171, 183, 199, 1) 100%); background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(171, 183, 199, 1) 100%); 
border: 3px solid rgba(191, 191, 199, 1); border-radius: 4px; height: 24px;}
.progress-bar-custom {background: rgba(72, 209, 54, 1); background: -webkit-linear-gradient(top, rgba(39, 141, 230, 1) 0%, rgba(72, 209, 54, 1) 100%); background: linear-gradient(to bottom, rgba(39, 141, 230, 1) 0%, rgba(72, 209, 54, 1) 100%);} 
.progress-striped .progress-bar-custom {background-color: rgba(72, 209, 54, 1); 
background-image: -webkit-gradient(linear,0 100%,100% 0,
color-stop(0.25,rgba(255, 255, 255, 0.15),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255, 255, 255, 0.15)),color-stop(0.75,rgba(255, 255, 255, 0.15)),color-stop(0.75,transparent),to(transparent))); 
background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent); 
background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent); 
background-size: 7px 7px;}