Ajuda php, javascript exibir/ocultar <div>

ooooBR · 26 de julho de 2011

galerinha essa dúvida está me deixando de cabeça quente já... no meu projeto.... preciso exibir uma div de acordo com a mensagem exibida!!!

<b>Documento: </b><?php echo $row_DetailRS1[Documento]; ?><br /></td>

<div id="Pedido" class="invisivel"><b>Número: </b><?php echo $row_DetailRS1['pPedido']; ?><b><br />
<b>Comprador: </b><?php echo $row_DetailRS1['pComprador']; ?><br /></div>

<div id="Boleto" class="invisivel"><b>Banco:</b><?php echo $row_DetailRS1['bBanco']; ?><br />
<b>Valor R$: </b><?php echo $row_DetailRS1['bValor']; ?><br />
<b>Vencimento: </b><?php echo $row_DetailRS1['bVencimento']; ?><br /></div>

nessa pagina será exibido os dados já cadastrados... gostaria de saber se é possivel a partir do resultado dessa linha exibir os dados referentes a consulta por exemplo se o resultado do documento for Pedido, aparece só a div Pedido... ou se for Boleto, aparece a div Boleto. ou se alguém tiver uma outra sugestão, fico agradecido!!! lembrando que os dados serão aleatorios dependendo da consulta!

desde já agradeço qualquer ajuda!!!

DiF · 27 de julho de 2011

como você tem duas divs escondidas ali... você pode fazer um if.. se você solicitar pedidos.. você altera o css da div pedidos para block.. senao você altera a div do boleto para block..

ooooBR · 27 de julho de 2011

dif você é o cara que eu esperava encontrar pra me ajudar aqui no forum, andei lendo alguns posts seu e vi que esta bem a par do assunto... bom o código está assim...

<b>Documento: </b><?php if ($row_DetailRS1['Documento'] == 'boleto'){
    echo $row_DetailRS1['Documento'];
} 
             elseif ($row_DetailRS1['Documento'] == 'pedido'){
    echo $row_DetailRS1['Documento'];
}  
             elseif ($row_DetailRS1['Documento'] == 'laudo'){
    echo $row_DetailRS1['Documento'];
}


<div id="Boleto" class="invisivel"><b>Banco:</b><?php echo $row_DetailRS1['bBanco']; ?><br /></div>

<div id="Pedido" class="invisivel"><b>Número: </b><?php echo $row_DetailRS1['pPedido']; ?><b><br /></div>

<div id="Laudo" class="invisivel"><b>Número: </b><?php echo $row_DetailRS1['nLaudo']; ?><b><br /></div>

atualmente o que está acontecendo é que todas as div's estão sendo exibidas de cara... pode me ajudar???

DiF · 27 de julho de 2011

olá amigo, obrigado por ter expectativas por mim. espero conseguir ajudar com seu problema.

estava analisando seu codigo. ali você tem blocos de if e elseif creio que você esta comparando os valores vindo de um banco de dados certo?

bom.. oa acontece ali que mostra os 3 juntos.. você esta colocando as divs fora dos blocos.. então ele passa pelos 3 testes e printa na tela as 3 divs. bom eu tentaria uma outra forma de fazer... talves com switch case... existem varias formas de resolver isso..

bom a principio tente fazer desta forma para ver se funciona:


<b>Documento: </b><?php if ($row_DetailRS1['Documento'] == 'boleto'){
    echo "<div id="Boleto' class='invisivel'><b>Banco</b>$row_DetailRS1['bBanco'];<br /></div>";    

} 
   elseif ($row_DetailRS1['Documento'] == 'pedido'){
             echo "<div id='Pedido' class='invisivel'><b>Número: </b> $row_DetailRS1['pPedido']; <b><br /></div>";   


}  
             elseif ($row_DetailRS1['Documento'] == 'laudo'){
    echo "<div id='Laudo' class='invisivel'><b>Número: </b> $row_DetailRS1['nLaudo'];<b><br /></div>";
}

?>

bom o que foi que mudou? apenas inclui suas divs dentro de cada bloco referente... ou seja a principio esta ideia.. apresentaria apenas a div boleto caso o valor do $row_DetailRS1['Documento'] fosse igual boleto .

bom eu to colocando ali as cegas.. porque nao tenho como testar pra ver se isso funciona... mas ja é uma idea de uma possivel solução.

agora te pergunto.. como você faz a seleçao entre boleto, pedido e laudo? via select? via radiobutton?

abraço

ooooBR · 27 de julho de 2011

bom na verdade eu sou fução... to fazendo um projetinho de documentos pro meu tcc de logistica... heheehe tudo a ver uma coisa com a outra né!!!?

mais voltando ao assunto.... na pagina anterior o usuario digita os dados do documento, por exemplo o boleto... ele escolhe num combobox o tipo de documento... que vai exibir as divs ocultas pro preenchimento... agora o problema (pagina de conferencia... os dados vindos da bd so serão visualizados sem poder alterar, pelos echos da vida...

mais da forma que esta agora.... aparece todos os campo sem os dados... e so o dado no lugar que deveria abrir... vou alterar aqui da forma que você sugeriu, e ja posto o resultado, grato pela sua atenção

olha a imagem de como está... o que tá sem negrito ta sendo puxado da bd... eu nesse caso deveria estar aparecendo apenas Descrição: Laudo

ooooBR · 29 de julho de 2011

</script>
<script language="Javascript">
function showDiv(div)
{
document.getElementById("NotaFiscal").className = "invisivel";
document.getElementById("GNP").className = "invisivel";
document.getElementById("Minuta").className = "invisivel";
document.getElementById("Conhecimento").className = "invisivel";
document.getElementById("Pedido").className = "invisivel";
document.getElementById("Boleto").className = "invisivel";
document.getElementById("Fatura").className = "invisivel";
document.getElementById("Recibo").className = "invisivel";
document.getElementById("Minuta").className = "invisivel";
document.getElementById("Documento").className = "invisivel";
document.getElementById("Material").className = "invisivel";
document.getElementById("Outros").className = "invisivel";
document.getElementById(div).className = "visivel";
}
</script>
<style>
.invisivel { display: none; }
.visivel { visibility: visible; }
</style>

</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing=" 0">
  <tr>
    <td width="15" valign="top"><div align="center"><img src="Imagens/cadeado.gif" alt="" width="30" height="30" /></div></td>
    <td><b><span class="style7">Intranet</span> -<a href="fechar.php"> Fechar Janela</a></b></td>
  </tr>
  <tr>
    <td valign="top"> </td>
    <td>
	<table border="0" cellspacing="3" cellpadding="0" class="verdana" width="706" >
      <form action="<?php echo $editFormAction;?>" method="POST" name="form1" id="form1">
        <tr>
          <td valign="top" height="40"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="200" valign="top"><p><b>Rementente: 
                          <b><font size="3"><?php echo $row_DetailRS1['Remetente']; ?></td>
                          <br />
              </b></p>
				<p> </td>
              <td valign="top"><p><b>Setor destinatário:<br />
              </b>              <?php echo $row_DetailRS1['setor']; ?><p><br /></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td><table width="100%" border="0" cellspacing=" 0" cellpadding="0">
            <tr><td width="200">
              <b>Documento: </b><?php if ($row_DetailRS1['Equipamento'] == 'NotaFiscal'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'GNP'){
    echo $row_DetailRS1['Equipamento'];
}  
             elseif ($row_DetailRS1['Equipamento'] == 'Minuta'){
    echo $row_DetailRS1['Equipamento'];
}  
             elseif ($row_DetailRS1['Equipamento'] == 'Conhecimento'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Pedido'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Boleto'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Fatura'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Recibo'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Documento'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Material'){
    echo $row_DetailRS1['Equipamento'];
} 
             elseif ($row_DetailRS1['Equipamento'] == 'Outros'){
    echo $row_DetailRS1['Equipamento']; 
} ?><br /></td>
              <div id="NotaFiscal" class="invisivel"><td><b>Número: </b><?php echo $row_DetailRS1['nNumero']; ?><br />
              <b>Fornecedor: </b><?php echo $row_DetailRS1['nFornecedor']; ?><br />
              <b>Data de Emissão: </b><?php echo $row_DetailRS1['nEmissao']; ?><br />

              <div id="GNP" class="invisivel"><b>Fornecedor: </b><?php echo $row_DetailRS1['gFornecedor']; ?><br />
              <b>Data de Emissão: </b><?php echo $row_DetailRS1['gEmissao']; ?><br /></div>

              <div id="Minuta" class="invisivel"><b>Transportadora: </b><?php echo $row_DetailRS1['mTransp']; ?><br />
              <b>Número: </b><?php echo $row_DetailRS1['mNumero']; ?><br /></div>

              <div id="Conhecimento" class="invisivel"><b>Transportadora: </b><?php echo $row_DetailRS1['cTransp']; ?><br />
              <b>Número: </b><?php echo $row_DetailRS1['cNumero']; ?><br /></div>

              <div id="Pedido" class="invisivel"><b>Número: </b><?php echo $row_DetailRS1['pPedido']; ?><br />
              <b>Comprador: </b><?php echo $row_DetailRS1['pComprador']; ?><br /></div>

              <div id="Boleto" class="invisivel"><b>Banco: </b><?php echo $row_DetailRS1['bBanco']; ?><br />
              <b>Valor R$: </b><?php echo $row_DetailRS1['bValor']; ?><br />
              <b>Vencimento: </b><?php echo $row_DetailRS1['bVencimento']; ?><br /></div>

              <div id="Fatura" class="invisivel"><b>Banco: </b><?php echo $row_DetailRS1['fBanco']; ?><br />
              <b>Valor R$: </b><?php echo $row_DetailRS1['fValor']; ?><br />
              <b>Vencimento: </b><?php echo $row_DetailRS1['fVencimento']; ?><br /></div>

              <div id="Recibo" class="invisivel"><b>Banco: </b><?php echo $row_DetailRS1['rBanco']; ?><br />
              <b>Valor R$: </b><?php echo $row_DetailRS1['rValor']; ?><br />
              <b>Vencimento: </b><?php echo $row_DetailRS1['rVencimento']; ?><br /></div>

              <div id="Documento" class="invisivel"><b>Descrição: </b><?php echo $row_DetailRS1['Descricao']; ?><br />

              <div id="Material" class="invisivel"><b>Descrição: </b><?php echo $row_DetailRS1['mDescricao']; ?><br />
              <b>Quantidade: </b><?php echo $row_DetailRS1['mQuantidade']; ?><br />

              <div id="Outros" class="invisivel"><b>Descrição: </b><?php echo $row_DetailRS1['oDescricao']; ?><br />
              <b>Quantidade: </b><?php echo $row_DetailRS1['oQuantidade']; ?><br />

                  </b></td>
            </tr>
          </table></td>
        </tr>

resultado... todas as <div> ocultas, exceto a primeira, que não fica oculta de jeito nenhum!!! e nenhuma outra fica exibida!

DiF · 29 de julho de 2011

olá amigo,

pelo jeito você deve ta usando alguma funçao em javascript para alterar a classe de invisivel para visivel certo?

tente usar desta maneira:

.visivel { display: block; }

ao invés de usar o visibility: visible

embora eu prefira fazer isso com jQuery eu acho mais refinado e melhor de usar.

ooooBR · 29 de julho de 2011

então cara! eu to usando java porque foi o exemplo que eu achei e me pareceu mais pratico e fácil... porém estou aberto a sugestoes, agora q sabe melhor o q pretendo fazer. se tive um exemplo com jquery eu aceito tenta adapta ele se for mais fácil! grato pela atençao!!!

DiF · 29 de julho de 2011

certo, bom vou tomar como exemplo sua primeira div que é NotaFiscal certo?

bom primeiro de tudo tens que entrar no site do jquery e baixar o plugin mais recente deles.

então você importa o plugin assim:

então.. o mesmo efeito de esconder e mostrar fica assim:


<script type="text/javascript">
   $(document).ready(function(){

      //atribui em variaveis as ids das divs e links
      var notafiscal = $("#NotaFiscal");      
      var mostraDiv = $("a#mostra"); 

      //esconde a div
      notafiscal.hide();

      //exibe a div oculta quando clicada no link
      mostraDiv.click(function{
         notafiscal.show();
     }); 
 });



<a href="#" id="mostra">Exibir detalhes</a>

<div id="NotaFiscal">
<td><b>Número: </b>
      <?php echo $row_DetailRS1['nNumero']; ?><br />
       <b>Fornecedor: </b>
      <?php echo $row_DetailRS1['nFornecedor']; ?><br />
      <b>Data de Emissão: </b>
      <?php echo $row_DetailRS1['nEmissao']; ?><br />
</div>

como você pode ver, primeiramente sua div nota fiscal esta escondida.. quando você clicar no link "exibir detalhes".. ela abrirá e mostrará o conteudo.

bom este procedimento é só para abrir.. se quiser esconder de novo.. teria que adicionar o codigo ali de show() para hide().... ou simplesmente use a funçao toggle() que eu acho melhor.

dai ficaria assim: notafiscal.toggle(); no lugar de show()

bom este é um exemplo bem básico.. de mostrar e esconder divs com jquery.. que eu acho bem melhor e mais refinado do que fazer em javascript puro...

para mais detalhes e melhor compreensao de como fazer... veja esta video aula que eu fiz a algum tem atras... sobre como mostrar e esconder divs com jquery:

inclusive.. mostra ate errinhos comuns.. de esquecimento .. rssr no fim o codigo funciona tranquilamente.. é só você seguir ali que você aprende.

ooooBR · 30 de julho de 2011

dif primeiramente muito agradecido pela atenção

<div id="NotaFiscal" class="invisivel"><td><b>Número: </b>

essa besterinha desse <td> perdido ai no meio do código tava impedindo dessa unica <div> ficar oculta... agora estão todas ocultas, acredito que pra exibir na hora certa o comando deve ser insirido nessa linha:

<b>Documento: </b><?php if ($row_DetailRS1['Equipamento'] == 'NotaFiscal'){
    echo $row_DetailRS1['Equipamento'];
}

acredito que ai conforme ele exibir a mensagem já vai ativar a <div> a ser exibida, porém... tudo que eu tentei adicionar ai deu pau!!!

eu dei uma olhada no jquery... só que nessa pagina num vai ter nenhum link!

DiF · 30 de julho de 2011

sim por isso que eu que eu disse q era so um exemplo.. você deve adaptar.

por exemplo, nao precisa ser exatamente um link para ativar o jquery.. pode ser seu submit ou button para isso basta alterar o var mostraDiv = $("a#mostra"); para var mostraDiv = $("input[type=submit]"); ou mostraDiv = $("input[type=button]");

ooooBR · 30 de julho de 2011

dif tipo no javascript mesmo, tem como fazer exibir a <div> na exibição do documento???

<b>Documento: </b><?php if ($row_DetailRS1['Equipamento'] == 'NotaFiscal'){
    echo $row_DetailRS1['Equipamento'];
}

+ alguma comando??? porque jquery fico meio confuso pra mim que sou iniciante!

DiF · 30 de julho de 2011

nao tem problema amigo, mesmo sendo iniciante o jquery é bastante simples.. na verdade o jquery nada mais é do que uma biblioteca javascript. tudo do jquery é baseado em javascript afim de facilitar alguns recursos que ficam muito extensos..

nao há misterio no codigo que lhe passei ali em cima. o jquery te dá mais facilidade de manipular os elementos.

como disse mais acima.. se você abre suas divs atraves de um formulario dependendo do elemento que escolher.. basta fazer uma verificaçao em javascript normal dentro do codigo do jquery. nao vai diferir em nada, porque você vai ter uma variavel que vai receber o valor escolhido seja nota fiscal ou outra.. e com base nisso você faz as verificaçoes e usa o "$(#id_da_div).show()" para mostrar

ooooBR · 31 de julho de 2011

vishiiii to doido aqui, fiz com seu exemplo e sumiu tudo a tela fica toda branca... e pior todo exemplo que tem em javascript na net ou é onclick... ou é select pelo <select>

esse ultimo que você passo eu tentei incluir da erro!!!

o que eu preciso é +- na hora que identifica o tipo de documento, já exiba a <div> que vai ta os dados preenchidos

DiF · 31 de julho de 2011

bom, você nao é obrigado a seguir estritamente o que eu disse ate agora, foram só possiveis sugestoes de solução. eu nao tenho como testar sua aplicaçao.. então eu to tentando te ajudar as cegas mesmo... pensando em soluçoes que podem funcionar ou nao.

tente explicar todo o procedimento que faz ate chegar na tela que você quer.

por exemplo... estas em um formulario, que você seleciona o tipo de documento via combobox/ via radio button.. preenche os dados do formulario e clica em submit? se possivel.. poderias postar o código de seu formulário, e o código para onde envia os dados ? todos completos e divididos para nao misturar? se possivel pode postar screens mostrando o problema?

tudo isso vai agilizar melhor de acharmos o erro.

abraço

ooooBR · 31 de julho de 2011

vou postar uma imagem que vai ajudar a entender...

cada quadrado ali representa a um tipo de documento... cada um é uma div oculta... o código da pagina é esse bitelo que eu postei anteriormente... são echos que vão exibir o que ja está na bd apenas!

pelo exemplo da foto... quando identificar que foi aberto o documento boleto, deverá exibir apenas a div correspondente!

pra chegar nessa pagina, entra numa pagina que digita o número do documento que é gerado sequencialmente a cada introdução de documento!

pela logica eu acho que o ideal seria no comando onde verifica o retorno do tipo de documento o que eu postei anteriormente, inserir um comando que exibi a div também, mais nao encontrei nada parecido... e o que andei tentando fazer não deu certo!

DiF · 31 de julho de 2011

é que eu ainda nao estou entendendo como você chega na tela da imagem. como você seleciona o que quer aparecer? nao achei no seu codigo um botao de submit.. ou alguma funçao javascript onsubmit que envia os dados... só a imagem nao ajuda muito você ja havia postado aquela imagem em outro post.

lembrando.. que para mostrar uma div segundo seu codigo... a variavel teria que receber um valor para ser comparado... onde ali exatamente você recebe o valor? alias.. como esse valor é passado? eu vi que no action de seu formulario tem uma variavel... mas qual é o conteudo dela?

ooooBR · 31 de julho de 2011

dif, essa seria uma tela apenas de confirmação, que exibe os dados já inseridos anterior, apos confirmado o usuario iria apenas confirmar, o action lança o usuario que confirmou os dados, o problema está sendo justamente esse selecionar o que será exibido!!!

o sistema todo seria um gerenciador de documentos... ex: eu entro e digito os documentos que estou enviando a você... você entra os dados só serão exibidos... ai você clica em confirma e salva seu id no banco de dados! essa tela seria apenas uma conferencia!

o que ta ali na imagem em negrito são dados fixos, sem negrito, são puxados da db... ai tai ta tudo certo... o meu problema está sendo fazer exibir

o conteudo geral...

como na imagem... quando aparece boleto... os dados do boleto

quando aparece nota fiscal... os dados da nota fiscal (que estão dentro das divs

dif grato pela sua contribuição, paciencia e sabedoria

enfim, me deram a suagestão de usar if nas div's

onde obtive o resultado esperado!!!

segue um trecho de como fico o código!!

             <td>
              <div id="NotaFiscal" <?php if( $row_DetailRS1['Equipamento'] == 'NotaFiscal'){
              echo "class='visivel'";
              } else {
              echo "class='invisivel'";
              }
              ?>    
              <div id="NotaFiscal" class="invisivel"><b>Número: </b><?php echo $row_DetailRS1['nNumero']; ?><br />
              <b>Fornecedor: </b><?php echo $row_DetailRS1['nFornecedor']; ?><br />
              <b>Data de Emissão: </b><?php echo $row_DetailRS1['nEmissao']; ?><br /></div>

              <div id="GNP" <?php if( $row_DetailRS1['Equipamento'] == 'GNP'){
              echo "class='visivel'";
              } else {
              echo "class='invisivel'";
              }
              ?>    
              <div id="GNP" class="invisivel"><b>Fornecedor: </b><?php echo $row_DetailRS1['gFornecedor']; ?><br />
              <b>Data de Emissão: </b><?php echo $row_DetailRS1['gEmissao']; ?><br /></div>

DiF · 31 de julho de 2011

sim isso eu entendi... mas nao entendi ainda a parte que você faz para chegar ali.. quem dá o comando de mostrar as divs? a unica coisa que consigo pensar é que sou "eu" quem solicito a tela.. portanto, teria que ter um formulário onde possa entrar com os dados referente... e ainda escolher o que vou apresentar na tela. acho q você nao esta sabendo explicar bem essa parte.. por isso sugeri que você postasse seus codigos completos desta parte.. tanto do formulário de solicitaçao qto o formulario de apresentaçao.

beleza, que bom que conseguiu resolver. porém acho q esta um pouco "sujo" .. mas enfim. se funcionou.. funcionou.

grato pela troca de ideias.

abraço