Atualizar várias divs com o mesmo nome

Eder Cuer · 19 de julho de 2012

Eae galera, estou com um problema em um sistema que estou fazendo, em php eu faço um for para mostrar quantas transportadoras atendem a uma certa região.



for ( $i = 0 ; $i < mysql_num_rows($result); $i++ ) {
    $nome = mysql_result($result, $i, 'nome');
    $cod   = mysql_result($result, $i, 'cod_transp');

 ...

Eu coloco os resultados dentro de uma div.



echo'
    <div style="border: 1px solid #000000; float:left; margin-left: 15px; margin-top: 5px;">
        <div><img src="img/scania.jpg" width="130" height="88" /></div>
        <div>Codigo: '.$cod.' </div>
        <div>Preço: <div id="preco" style="float:right; border: 1px solid; width: 40px; clear:left; padding-right:40px"></div> </div>
        <div style="clear:right"><a target="blank" href="verrest.php?cod='.$cod.'">Ver Restrições</a></div>
    </div>';

Eu estou usando o $.post() do jquery para poder calcular o preço do frete e depois jogar o valor na div "preco", mas no caso ele só está mostrando na primeira div, as restantes ficam sem nada, alguém sabe alguma forma de preecher todas as divs?

Mog.Lucas · 19 de julho de 2012

A maneira ideal/mais rápida é dar um id para cada uma das divs filhas, e no retorno do ajax jogar o resultado para cada uma das divs.. se quiser colocar o mesmo id, acredito que fica até mais fácil de fazer com jQuery..

Poste seu código ajax/javascript..

Eder Cuer · 20 de julho de 2012

E como eu daria nome a essas divs filhas? Porque no meu caso eu não saberia o número exato de divs que resultariam da pesquisa.



<script type="text/javascript">
    $(function(){
        //Função que ao clicar no botão, irá fazer.
	$("#tracar").click(function(){	

	    var distancia = $("#distancia").val();	
	    $.post("calcula.php", { distancia:distancia }, function(get_retorno) {
	        $("#preco").show("slow").text(get_retorno);

	     );
	 });
     });

</script>

Mog.Lucas · 20 de julho de 2012

Continuo não entendendo o que você quer fazer.. nos códigos do seu primeiro post não ficam claras essas divs filhas.

Você cria essas divs por Javascript ou PHP? De qualquer jeito, você pode definir um nome padrão e usar o jQuery.each(); para percorrer todos, ou fazer em forma de loop. Criar uma div tipo:

var x = 1;
function criaDiv(){
	var div = document.createElement('div');
	div.name = "Teste" + x;
	div.innerHTML = 'Div criada';
	div.style.position = 'relative';
	document.body.appendChild(div);
	x++;
}

E depois percorre-los também por loop..

Eder Cuer · 20 de julho de 2012

Desculpa eu não falei... estou criando as divs em php, faço o for e com os resultados vou criando as divs, mas é feito dinamicamente.



for ( $i = 0 ; $i < mysql_num_rows($result); $i++ ) {
    $nome        = mysql_result($result, $i, 'nome');
    $cod      = mysql_result($result, $i, 'cod_transp');


    echo'
        <div style="border: 1px solid #000000; float:left; margin-left: 15px; margin-top: 5px;">
            <div><img src="img/scania.jpg" width="130" height="88" /></div>
            <div>Codigo: '.$cod.' </div>
            <div>Preço: <div id="preco" style="float:right; width: 60px; padding-right:10px; "></div> </div>
            <div style="clear:both"><a target="blank" href="verrest.php?cod='.$cod.'">Ver Restrições</a></div>
        </div>';

}

O número de divs depende do "mysql_num_rows($result)", mas na hora que retorna só preenche a primeira div

Como da pra ver na imagem, ali no "Preço" só retorna na primeira.

Mog.Lucas · 20 de julho de 2012

Faça:

<div>Preço: <div id="preco[COLOR="Red"][B]'.$cod.'[/B][/COLOR]" style="float:right; width: 60px; padding-right:10px; "></div> </div>

E ai você consegue acessar pelo Javascript. Porém, no Javascript você precisará manipular o id (código) da transportadora, para poder acessar o id correto.

Entendeu ?

Eder Cuer · 23 de julho de 2012

Acho que eu entendi sim Mog.Lucas, mas no caso, eu estou usando o $.post() do jquery, como eu poderia tratar esses id's, já que no código da query ele já define qual variável receberá o resultado ?


$("#preco").show("slow").text(get_retorno);

Mog.Lucas · 23 de julho de 2012

JSON: http://www.w3schools.com/json/default.asp

Algo como:

$arrayRetorno = Array("id" => $codigoDaTransportadora, "preco" => $variavelDoPreco);
echo json_encode($arrayRetorno);

Ou na mão mesmo (ver w3schools pra entender o padrão).

Aí depois de dar um eval (ver w3schools 2) você pode acessar por get_retorno.id ou get_retorno.preco

Eder Cuer · 23 de julho de 2012

Eu tava tentando colocar o js dentro do php e tentar manipular com for:


for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{
    $cod      = mysql_result($result, $i, 'cod_transp');
    echo '$("#preco'.$cod.'").show("slow").text(get_retorno); \n';											}

Mas não funciona, vou dar uma olhada.

Eder Cuer · 23 de julho de 2012

Lucas agora deu uma arrancada aqui o/

Não sei se estou usando certo, ele carregou as divs mas fica faltando uma, e dependendo de onde eu coloco a linha de código a div que falta muda de lugar.

Eu testei vários jeitos, fiz uns testes separados e funciona normal, mas quando vou colocar no sistema ele "esquece" uma div.



for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{							
    $cod = mysql_result($result, $i, 'cod_transp');
    $arrayRetorno = $cod;
    echo '$("#preco'.json_decode($arrayRetorno).'").show("slow").text(get_retorno)';
    echo "\n";
}



for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{
    $arrayRetorno = $cod;
    echo '$("#preco'.json_decode($arrayRetorno).'").show("slow").text(get_retorno)'; 
    echo "\n";
    $cod = mysql_result($result, $i, 'cod_transp');											}

Mog.Lucas · 26 de julho de 2012

Amigo.. desculpe, não estou entendendo o que você está tentando fazer..

Você entendeu o JSON ou tem alguma dúvida ?

A lógica:

As divs precisam ser criadas com um ID pelo PHP.

No retorno do ajax, você precisaria, utilizando JSON, identificar a div correta e jogar o conteúdo pra lá. Para gerar esse JSON, você precisará no PHP gerar uma array conforme mencionado no meu ultimo post e utilizar o json_encode.

Você não trabalhará com json_decode..

Poste seus códigos "completos".. só as partes referentes ao que precisa de ajuda, e se possível na ordem "cronológica"..

Eder Cuer · 26 de julho de 2012

Eu to tentando colocar o resultado em todas as divs.

Quando o usuário clicar para fazer o orçamento as divs "preço" das transportadoras vão mostrar o preço de cada uma.

Aqui eu to criando as divs:


<div>Preço: <div id="preco'.$cod.'" style="float:right; width: 60px; padding-right:10px; "></div> </div>

E aqui o JSON:


var distancia = $("#distancia").val();
											$.post("calcula.php", { distancia:distancia}, function(get_retorno) {

    for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
    {
         $arrayRetorno = $cod;
	 echo' $("#preco'.json_decode($arrayRetorno).'").show("slow").text(get_retorno)'; 
	echo "\n";
	$cod = mysql_result($result, $i, 'cod_transp');
    }

    echo '	
});

Mog.Lucas · 26 de julho de 2012

Ok..

Para começar: você não usará o json_decode aqui..

$.post("calcula.php", { distancia:distancia}, function([COLOR="Red"][B]retorno[/B][/COLOR]) {
	[COLOR="red"][B]// AQUI QUE É A CHAVE![/B][/COLOR]
	[COLOR="Orange"][B]$.each[/B][/COLOR](retorno, function(index){
		$("#preco"+retorno[index].[COLOR="Blue"][B]codigoTransportadora[/B][/COLOR]).show("slow").text(retorno[index].[COLOR="Green"][B]preco[/B][/COLOR])';
	});
}

Aqui você faz a requisição ajax. Aqui, você poderia passar o código da transportadora caso necessário.. mas como você faz o cálculo para todas as transportadoras, usando como base apenas a distancia, então não há a necessidade.

Uma vez no PHP, você precisa de duas informações:

O código da transportadora, e o preço

Tendo eles, você faz:

for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
    {
	$codigoTransportadora = mysql_result($result, $i, 'cod_transp');
	$precoTransportadora = 0; // COLOQUE O CALCULO DE PREÇO AQUI!
	$arrayRetorno[COLOR="orange"][B][][/B][/COLOR] = Array([COLOR="blue"][B]"codigoTransportadora"[/B][/COLOR] => $codigoTransportadora, "[COLOR="green"][B]preco[/B][/COLOR]" => $precoTransportadora);
    }
echo [COLOR="Red"][B]json_encode($arrayRetorno);[/B][/COLOR] // FORA DO LOOP!

Eder Cuer · 30 de julho de 2012

Eae Lucas, não entra na minha cabeça esse JSON. Eu tentei fazer como você disse e não retorna nada, então tentei mais um pouco e resolvi, tava faltando apenas um ";" por isso sempre ficava faltando uma transportadora, ficou assim:



for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{

     $cod  = mysql_result($result, $i, 'cod_transp');
     $nome = mysql_result($result, $i, 'nome');

     echo '$("#preco'.$cod.'").show("slow").text(get_retorno)[B];[/B]'; 
     echo "\n";

No caso cada transportadora tem um campo onde informa o preço por metro, se eu fosse tentar fazer um cálculo para cada transportadora com base nesses metros que to retornando eu teria que usar o JSON, ou teria um outro método?

Mog.Lucas · 30 de julho de 2012

Se for usar ajax o melhor seria usar JSON sim.. até teria outros metódos mas seriam semelhantes ao utilizar JSON..

JSON nada mais é que um conjunto de informações arrumadas de uma forma simples.. por ex:

{"campo1":"Valor 1", "campo2":"Valor 2"}

Seria necessário dar um eval, pois como o JSON vira do PHP o Ajax não faz a menor ideia do que é isso.. dando um eval, você, "interpreta" o JSON pelo Javascript:

var objeto = eval ("(" + retorno + ")");
// a partir daqui você acessaria por
alert(objeto.campo1);

Mas atenção: como você usa o jQuery, não há necessidade de usar essa parte do Eval pois o jQuery mesmo já faz isso.. no seu caso seria só usar:

alert(get_retorno.campo1);

Sobre o meu código não ter funcionado, não testei.. mas se a requisição não tá retornando nada, verifique a parte em PHP que recebe a requisição Ajax.. meu ultimo código acima. Não tem "nada" a ver com JSON, então acredito que você encontre o erro, se existir o/

E eu não entendo seu código.. você está 'criando' um javascript 'dinamicamente' no PHP usando Ajax? Se for +- isso, recomendo que estude mais sobre Ajax pois acho que você não entendeu a ideia..

Ref:

http://www.w3schools.com/json/json_eval.asp

Eder Cuer · 14 de dezembro de 2012

Eu consegui resolver. De maneira bem simples, fiz somente em php mesmo, eu não tava passando os valores corretamente, mas agora ta funcionando corretamente. Valeu.