[Resolvido] Progress Bar Jquery + PHP ( tempo adiantado )

mcd more core · Outubro 14, 2011

Galera, esse código abaixo que o ( Andrey ) me deu uma força tirando uma dúvida que eu tinha, ele faz o seguinte...

Ele pegar os e-mails e vai listando juntamente com o progress bar, porém é que se eu tiver um registro até ( 100 e-mails ) o progress bar + a listagem dos e-mails abaixo segue normais, alinhados e sincronizados, mas... quando eu coloco uma lista de 200 e-mails ou acima de 100 e-mails, o progresse bar ele chega até 100 e para como se ja concretizou, mas a listagem abaixo ela continua listando o restante dos e-mails, o que acontece é que o progress bar acima de 100 registros de e-mail ele já não consegui sincronizar de acordo a quantidade de registros, alguém ai sabe como eu poderia resolver isso???

# CÓDIGO PROGRESS BAR jQuery + PHP #

{ Créditos.: Andrey }


<html>
       <head>
               <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
               <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
               <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" type="text/css" />
               <script type="text/javascript">
                        function id( el ){  
                                  return document.getElementById( el )  
                        }  
                        function changeDisplay( els, val ){  
                               for( var i = 0 ; i < els.length ; i ++ ) {  
                                       els[ i ].style.display = val;  
                               }  
                       }  
                       function mostra( ps ){  
                               //if( ps.length > i ) $( '#current' ) . html ( ps[ i ] . innerHTML ) ; 
                               if( ps.length > i ) ps[ i ] . style . display = 'block' ;
                               else window.clearInterval( intv );  
                               $( document ) . ready ( function () {
                                       $( '#progress' ) . progressbar({ value : i }) ;
                               } ) ;
                               i++;  
                       }  
                       var i = 0;  
                       var intv = 0;  
                       window.onload = function(){  
                               var ps = id('sendedMails').getElementsByTagName('p');  
                               changeDisplay( ps, 'none' );  
                               intv = window.setInterval( mostra, 100, ps );  
                       }  
               </script>
       </head>
       <style type="text/css">
               <!--
                       .sended{
                               display: none;
                       }
               -->
       </style>
       <body>
               <div id="progress"></div>
               <div id="current"></div>
               <div id="sendedMails">
                <?php 
                       for( $i = 0 ; $i <= 150 ; ++ $i ) {

					printf( '<p class="sended">teste%d@email.com</p>' , $i ) ;
                                               // faz um loop de 150 e-mails

					}
                ?>
               </div>
       </body>
</html>

Se alguém puder me ajudar agradeço.

Valeu :D

kelvim · Outubro 14, 2011

olha eu não entendi muito bem o Código, mas a lógica para o que você quer é simples, use em vez de numero absoluto, use porcentagem.

só é dividir a quantidade de e-mail por 100. o resultado é igual a 1%. cada vez que essa quantidade de e-mail for enviado o progress bar cresse 1.

espero ter ajudado.

Andrey Knupp Vital · Outubro 14, 2011

Faz assim .. troque :

$( '#progress' ) . progressbar({ value: i }) ;

Por:

$( '#progress' ) . progressbar({ value: i , max: ps.length }) ;

Código bem gambiarrento .. mas naquele dia, era essas sujeiras que estavam aparecendo na minha cabeça huaahuahuahua

mcd more core · Outubro 14, 2011

KKKKKKKKKKKKKKKK

beleza, Andry, funcionou beleza cara.

# Pra colocar meu código, só colocar meu (while) dentro da div

<div id="sendedMails">
                <?php 
                      // meu while AQUI
                ?>
               </div>

Certo ?, valeu! :D

Andrey Knupp Vital · Outubro 14, 2011

Isso aí .. lembrando que eu não aprovo nada deste código ! deve ter algum outro jeito de fazer .. mas agora não me vem a cabeça ..

;)

mcd more core · Outubro 14, 2011

beleza, mas ta resolvido pelo menos a minha dúvida aqui, valeu mesmo

[RESOLVIDO] :joia:

Andrey Knupp Vital · Outubro 14, 2011

Segue uma solução mais fresh do que essa utilizando somente jQuery ..

<html>
       <head>
               <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
               <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
               <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" type="text/css" />
               <script type="text/javascript">
                        $ ( document ) . ready ( function ( ) { 
			  var size = $ ( 'p.sended' ) . size ( ) ; var i = 0 ;
			  var interval = setInterval ( function ( ) {
				if ( size >= i ) { 
					$( '#sendedMails p' ) . eq ( i ) . show ( ) ;
					$ ( '#progress' ) . progressbar ( { value : i , max : size } ) ;
				} else window . clearInterval ( interval ) ;
				++ i ;
			  } , 50 ) ;
		    } ) ;
               </script>
       </head>
       <style type="text/css">
               <!--
                       .sended{
                               display: none;
		        float : left ;
			margin-left: 10 px;
                       }
               -->
       </style>
       <body>
               <div id="progress"></div>
               <div id="current"></div>
               <div id="sendedMails">
                <?php 
                       for( $i = 0 ; $i <= 150 ; ++ $i ) {
			 printf( '<p class="sended">teste%d@email.com</p>' , $i ) ;
                       }
                ?>
               </div>
       </body>
</html>

Pode mudar o intervalo pra quanto você quiser .. lento / rápido, não vai alterar na progress nem na exibição ..

mcd more core · Outubro 14, 2011

Andrey, esqueci de te perguntar...

Esse theme do REL do CSS

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" type="text/css" />

onde eu posso achar outros desses no api do Google, e escolher qual estilização colocar ?

valeu, vou testar o jQuery que você informou, ja te passo o feed.

Andrey Knupp Vital · Outubro 14, 2011

Esses são todos ..

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/dark-hive/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/dot-luv/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/eggplant/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/excite-bike/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/flick/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/hot-sneaks/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/humanity/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/le-frog/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/mint-choc/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/overcast/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/pepper-grinder/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/south-street/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/swanky-purse/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/trontastic/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/vader/jquery-ui.css

Você também pode criar um personalizado .. http://jqueryui.com/themeroller/ daí só baixar e aplicar.

mcd more core · Outubro 14, 2011

Pode mudar o intervalo pra quanto você quiser .. lento / rápido, não vai alterar na progress nem na exibição ..

Como eu vou fazer o seguinte...

# Form #

<form method="post" action="send.php">
<input type="text" name="nome" />
</form>

# send.php #

<html>
       <head>
               <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
               <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
               <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" type="text/css" />
               <script type="text/javascript">
                        $ ( document ) . ready ( function ( ) { 
                                 var size = $ ( 'p.sended' ) . size ( ) ; var i = 0 ;
                                 var interval = setInterval ( function ( ) {
                                       if ( size >= i ) { 
                                               $( '#sendedMails p' ) . eq ( i ) . show ( ) ;
                                               $ ( '#progress' ) . progressbar ( { value : i , max : size } ) ;
                                       } else window . clearInterval ( interval ) ;
                                       ++ i ;
                                 } , 50 ) ;
                           } ) ;
               </script>
       </head>
       <style type="text/css">
               <!--
                       .sended{
                               display: none;
                               float : left ;
                               margin-left: 10 px;
                       }
               -->
       </style>
       <body>
               <div id="progress"></div>
               <div id="current"></div>
               <div id="sendedMails">
                <?php 
// AQUI VAI ESTA MEU WHILE
                       for( $i = 0 ; $i <= 150000 ; ++ $i ) {
                                printf( '<p class="sended">teste%d@email.com</p>' , $i ) ;
                       }
                ?>
               </div>
       </body>
</html>

A minha preocupação é a seguinte, sendo que eu até ja testei aqui...

# Como eu vou está diretamente levando a essa página, quando eu tiver um loop de 1mil/2mil/5mil e-mails de uma vez, a página ainda vai esta lenta, carregando e printando eles para exibir o progress bar.

Minha pergunta é...

# Teria como eu enviar o meu FORM com a

action="send.php"

porém nesse SEND estaria a função jQUery ao qual pegaria todo o meu

'POST'

e enviaria para a pagina

enviar.php

onde teria o meu WHILE, dessa forma ele exibiria de vez já o PROGRESS BAR mesmo no 0% ainda, mas nao me exibiria aquele lentidão para exibir o progress bar de vez junto com o Loop dentro dele mesmo.

me entendeu ?

seria +/- como você fez nesse código aqui abaixo, porém que ele já me retorne para o progress bar sem aquela demora de ainda ta lendo o Loop para me exibir o progresso bar e começar o andamento.

Onde diz... ( URL: 'mail.php', ) algo como isso, de forma que não demore mesmo ainda no loop para exibir o progress bar, que ele ja exiba o progress bar e só fique aguardando a terminação do Loop para começar o andamento.

$ . ajax ( {
					 type : 'POST' ,
					 url : 'mail.php' , // AQUI NA URL
					 data : 's=' + i ,
					 dataType : 'json' ,
					 success: function( data ) {
						$( '#progress' ) . progressbar( { 
							value : i
						} ) ;


<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" type="text/css" />
	<script type="text/javascript">
		 $( document ) . ready ( function ( ) {
			 var i = 0 ;
			 setInterval( function(  ) {
				 $ . ajax ( {
					 type : 'POST' ,
					 url : 'mail.php' ,
					 data : 's=' + i ,
					 dataType : 'json' ,
					 success: function( data ) {
						$( '#progress' ) . progressbar( { 
							value : i
						} ) ;
						if( i <= 2000 && ! isNaN ( data . progress ) ) { 
							i ++ ;
							$( '#current' ) . html ( data . mail ) ;
						} else $( '#current' ) . html ( 'Envio concluido' ) ;
					 }
				 } ) ;
			 } , 100 ) ;
		 } ) ;
	</script>
</head>
<body>
	<div id="progress"></div>
	<div id="current"></div>
</body>
</html>

Teria como Andrey, me da essa força ai man ?

[ Pensando seriamente em tomar um curso com você PHP + JS + jQuery ] :P

aguardo...

Andrey Knupp Vital · Outubro 14, 2011

Certo .. esquece essas formas com ajax, é besteira .. não foi atoa que te dei exemplos gerando o html fixo na própria página que gera o progress bar .. você não vai utilizar um 'action', e sim colocar internamente o form e fazer um if ..

<html>
       <head>
               <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
               <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
               <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" type="text/css" />
               <script type="text/javascript">
                        $ ( document ) . ready ( function ( ) { 
			  var size = $ ( 'p.sended' ) . size ( ) ; var i = 0 ;
			  var interval = setInterval ( function ( ) {
				if ( size >= i ) { 
					$( '#sendedMails p' ) . eq ( i ) . show ( ) ;
					$ ( '#progress' ) . progressbar ( { value : i , max : size } ) ;
				} else window . clearInterval ( interval ) ;
				++ i ;
			  } , 1 ) ;
		    } ) ;
               </script>
       </head>
       <style type="text/css">
               <!--
                       .sended{
                               display: none;
			    float : left ;
			    margin-left: 10 px;
                       }
               -->
       </style>
       <body>
               <form method="POST">
		Enviar emails <input type="submit" name="sendMails" value="Enviar" />
	  </form>
	  <?php
		 if( isset ( $_POST[ 'sendMails' ] ) ) {
			echo '<div id="progress"></div>';
			echo '<div id="current"></div>';
			echo '<div id="sendedMails">';
			  while ( $mailRow = mysql_fetch_assoc ( $query ) ) {
				   if ( mail ( ... ) ) {
					 echo '<p class="sended">' , $mailRow [ 'email' ] , '</p>' ;
				   }
			  }
			echo '</div>';
		 }
	  ?>
	  </div>
       </body>
</html>

Não estou tempo nem pra mim, vou ter tempo pra dar aula ?

mcd more core · Outubro 14, 2011

HAHAHA, mas e esses ( ... ) que esta na linha 39,


while ( $mailRow = mysql_fetch_assoc ( $query ) ) {
if ( mail ( ... ) ) { // aqui nos ( ... ) eu coloco o que? ou o que realmente quer dizer essa função? porque aqui deu como erro nessa parte da linha.
echo '<p class="sended">' , $mailRow [ 'email' ] , '</p>' ;
}
}

# Bom, uns R$1.000,00 pra ensinar ta bom né ?kkkkkkkkkkkkkkkkkkk { e essa aula ? } B)

Aguardo.

Andrey Knupp Vital · Outubro 14, 2011

Mil reais não dá nem pra te ensinar nem 10% .. :)

Cara o '...' quer dizer a implementação da função .. argumentos .. isso é você quem tem que fazer.

mcd more core · Outubro 14, 2011

KKKKKKKKKKKKKKKKKKKK

To ligado. 1000 é mixaria haha, depois faço outra oferta B)

Valeu pela força, consegui tirar as dúvidas e resolver a questão que eu precisava.

[ RESOLVIDO ]

:joia:

mcd more core · Outubro 15, 2011

Mil reais não dá nem pra te ensinar nem 10% .. :)

Cara o '...' quer dizer a implementação da função .. argumentos .. isso é você quem tem que fazer.

Andrey, uma última coisa desse script que você fez, teria como ter nele um campo de mensagem que ao concluír ele avise ( Mensagens enviadas com sucesso! ) ??? realmente quando ele concluir 100% o envio.

Teria como ter esse item nesse código abaixo que você desenvolveu ?

<html>
       <head>
                     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
               <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
               <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" type="text/css" />

               <script type="text/javascript">
                        $ ( document ) . ready ( function ( ) { 
                                 var size = $ ( 'p.sended' ) . size ( ) ; var i = 0 ;
                                 var interval = setInterval ( function ( ) {
                                       if ( size >= i ) { 
                                               $( '#sendedMails p' ) . eq ( i ) . show ( ) ;
                                               $ ( '#progress' ) . progressbar ( { value : i , max : size } ) ;
                                       } else window . clearInterval ( interval ) ;
                                       ++ i ;
                                 } , 1 ) ;
                           } ) ;
               </script>


       </head>
       <style type="text/css">
               <!--
                       .sended{
                               display: none;
                                   float : left ;
                                   margin-left: 10 px;
                       }
               -->
       </style>
       <body>
               <form method="POST">
                       Enviar emails <input type="submit" name="sendMails" value="Enviar" />
                 </form>
                 <?php
			  include"../config/conexao.php";
                        if( isset ( $_POST[ 'sendMails' ] ) ) {
                               echo '<div id="progress"></div>';
                               echo '<div id="current"></div>';
                               echo '<div id="sendedMails">';

						$sql=mysql_query("select * from trampos order by id desc");
						while($ll=mysql_fetch_array($sql))
						{
		                     echo '<p class="sended">' , $ll [ 'titulo' ] , '</p>' ;
						}
                        }
                 ?>
                 </div>
       </body>
</html>

Se tiver, aguardo e agradeço por essa força brother.

eomontiero · Março 26, 2012

pena que so exibe depois do loop por completo

tem como melhorar ou corrigir isso ai?

pois mesmo usando flush ele n mostra o resultado em tempo de execução

Arquivado

[Resolvido] Progress Bar Jquery + PHP ( tempo adiantado )

Recommended Posts

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kelvim 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andrey Knupp Vital 136

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andrey Knupp Vital 136

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andrey Knupp Vital 136

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andrey Knupp Vital 136

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andrey Knupp Vital 136

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andrey Knupp Vital 136

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mcd more core 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

eomontiero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante