Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

halfar

MENUS - PASSAR VARIAVEIS ENTRE MENUS

Recommended Posts

Inicialmente tenho uma conexao com banco de dados para extrair alguns dados:

 

$sql = "select * from tabela order by data desc"; // order data desc, permite acessar as materias mais recentes.


$exec = $conn->query($sql);

$rows = $exec->fetchAll( PDO::FETCH_ASSOC );

$dados = $rows;

 

 

Em seguida tenho algumas divs expansíveis, que quando clica no primeira div, se expande, e executo um codigo php para exibir os titulos que estão em um banco de dados, assim:

 

DIV1

DIV2

 

 

Quando clico na DIV1, se expande e exibe o título extraido do banco de dados, assim:

DIV1 (clico nesta div, ela se expande)

for ( $a=0; $a <= count($dados)-1; $a++ ) {
echo $dados[$a]["titulo"] . "<br>";

}

 

Note que poderão ser listados varios titulos. O problema é, ao clicar sobre o título (pois o título será exibido em forma de link), deverá ser exibido o texto correspondente ao título.

Na instrucao sql acima eu já acessei o banco de dados e já posso pegar o valor do titulo (como fiz acima na primeira div), e tenho já tambem o texto. Mas como exibir o texto correto?

 

Sei que existe uma possibilidade de fazer o mesmo procedimento quando vamos submeter o valor de um formulario via ajax ou jquery, poderia utilizar o mesmo critério, mas irá realizar uma nova consulta ao banco de dados atraves de uma nova pagina php, o que acho meio desnecessário, pois já tenho a consulta realizada. Então é apenas uma questão de manipular variaveis, passando-a através de ajax ou jquery e depois resgatar o valor desta variavel para exibir o texto correto. 

 

Dei uma pesquisada sobre isto, mas não achei nada que resolva....

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara,

Acho que poderia ser feito utilizando de duas formas:

 

- Local Storage ( http://www.w3schools.com/html/html5_webstorage.asp ), mas ainda existiria o problema de toda requisição executar, do lado do servidor, executar a consulta, então seria necessário algum controle para evitar isso, seilá, alguma variável de sessão, parâmetro no request, ou alguma outra coisa.

 

- Atualizar somente algumas áreas na tela, ou seja, fazer requisições em AJAX e atualizar apenas áreas da tela, assim o menu não seria redesenhado a toda solicitação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

bem, tenho uma outra situacao. 

 

Nestes menus que são clicados e se expandem, o usuário clica num menu, ele se expande e mostra os titulos:

TITULO 1

TITULO 2

TITULO 3

TITULO 4  

etc...

 

quando o usuário clica no TITULO 1, a janela se expande e exibe o texto referente aquele titulo. Ocorre que a janela

sempre se expande a partir do ultimo titulo, neste exemplo a janela se expande a partiru do TITULO 4. Sendo assim,

não é legal, pois posso ter uma relação de 100 titulos, e se o usuario clicar no TITULO1, o texto será mostrado apos o TITULO 100, forçando o usuario a rolar a tela para baixo para ver o texto, além do que, como está fora do alcance de sua visão que a janela se expandiu lá no fim da página, poderá nem perceber.

 

Então o que quero que a janela se expanda logo abaixo do titulo em que clicou.

 

O codigo que fiz está assim:

 

aqui o codigo jquery

 

Citar

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

    

//============================ INICIO MENU EXPANSIVEL ===============================================

//hide the all of the element with class msg_body
  $(".msg_titulo").hide();
  $(".msg_texto").hide();
    //toggle the componenet with class msg_body
  $(".msg_grupo").click(function()
  {

    $(this).next(".msg_titulo").slideToggle(200);
    $(".msg_texto").hide();
  });

//hide the all of the element with class msg_body
  //toggle the componenet with class msg_body
  $(".msg_titulo").click(function()
  {
    // recupera o valor de id (corresponde ao numero da matriz - obtido em selecao no banco de dados). Não se refere ao id na tabela no banco de dados,
    // mas sim ao valor contido na variavel $a existente no laço for.
      //var registro = $(this).attr('id');
    //alert(registro);


    $(this).next(".msg_texto").slideToggle(200);

    
  });


  //================================= FIM MENU EXPANSIVEL===========================================

 

 

agora o codigo HTML


 

Citar

 

<div class="msg_grupos">
<p class="msg_grupo">HISTORIA </p>

 

<div class="msg_titulo">

<?php 
for ( $a=0; $a <= count($dados)-1; $a++ ) {
    $xtexto = $dados[$a]["texto"];
echo "<div id='$xtexto'>" . $dados[$a]["titulo"] . "</div>" . "<br>";

}
?>    
 

</div>

 

<div class="msg_texto">

aqui vem o texto conforme o titulo que foi clicado


</div>

 


 

 

 

é isto..

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida, referente a PEGAR AUTOMATICAMENTE a HORA e alimentar o campo INPUT.
       
      Tenho uma rotina, que estava aparentemente funcionando corretamente, mas agora estou tendo problema.
       
      A rotina, pega a HORA atual e informa automaticamente o INPUT, não estou entendendo porque agora não está mais fazendo.

      Abaixo a rotina.

       
      <div class="col-lg-3"> <label for="cotaHrsinicio">Hora da Abertura<span class="required">*</span></label> <div class="controls"> <input type="time" id="cotaHrsinicio" name="cotaHrsinicio" class="form-control" style="width:100%;" value="" /> <!-- NESSE INPUT A ROTINA INFORMA A DATA ATUAL --> </div> </div>  
       
      function date_time() { var date = new Date(); //var am_pm = "AM"; var hour = date.getHours(); /* if(hour>=12){ am_pm = "PM"; } */ if (hour == 0) { hour = 12; } if(hour<12){ hour = hour - 12; } if(hour>12){ hour + 12; } if(hour<10){ hour = "0"+hour; } var minute = date.getMinutes(); if (minute<10){ minute = "0"+minute; } var sec = date.getSeconds(); if(sec<10){ sec = "0"+sec; } /* *Formato da Hora (h:m:s) * Passar para a Variável: Hora Atual */ var cotaHrsinicio = document.getElementById("cotaHrsinicio").value = hour+":"+minute; }
      Grato,
       
      Cesar

       
    • Por luiz monteiro
      Bom dia.
      Estou precisando formatar um campo de entrada type text somente para numero com a seguinte formatação.
      se menor que 999 mostrar dessa forma mesmo, nesse caso seria para centena.dezena.unidade. Tipo 001 até 009 depois 010 até 099 depois 100 até 999
      de 1.000 até 999.999  mostrar com o ponto, nesse caso seria para milhar.centena.dezena.unidade. Tipo 001.000 até 001.999 e assim por diante.
      de 1.000.000 até 9.999.000, nesse caso seria para milhão.milhar.centena.dezena.unidade. aqui mesma ideia....
      Parecidos com aqueles campos de preço, que ao digitar os zeros ficam a esquerda até o valor atingirem a unidade correspondente.
       
      Tentei adaptar esse que encontrei na net.
      function moeda(a, e, r, t) { let n = "" , h = j = 0 , u = tamanho2 = 0 , l = ajd2 = "" , o = window.Event ? t.which : t.keyCode; if (13 == o || 8 == o) return !0; if (n = String.fromCharCode(o), -1 == "0123456789".indexOf(n)) return !1; for (u = a.value.length, h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++) ; for (l = ""; h < u; h++) -1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h)); if (l += n, 0 == (u = l.length) && (a.value = ""), 1 == u && (a.value = "0" + r + "0" + l), 2 == u && (a.value = "0" + r + l), u > 2) { for (ajd2 = "", j = 0, h = u - 3; h >= 0; h--) 3 == j && (ajd2 += e, j = 0), ajd2 += l.charAt(h), j++; for (a.value = "", tamanho2 = ajd2.length, h = tamanho2 - 1; h >= 0; h--) a.value += ajd2.charAt(h); a.value += r + l.substr(u - 2, u) } return !1 } Mas sem sucesso.
       
      Grato por enquanto.
       
       
       
    • Por Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Bom dia. Eu estou tentando encontrar uma maneira de evitar que após o usuário selecionar, se selecionar, uma imagem, essa seja substituída apenas por outra selecionada. Porém quando o usuário cancela a seleção, o input file remove o arquivo se já foi selecionado anteriormente.
      Essa é a estrutura que estou usando HTML
      form action="#" method="post" name="formulario" id="formulario" enctype="multipart/form-data"
      input type="file" name="file_name[]" br input type="file" name="file_name[]" br button enviar /button /form
      JS PURO
      Peguei esse script em um post aqui do stackoverflow e adaptei
      script type="text/javascript"
      let formulario = document.querySelector("#formulario"); formulario.addEventListener("change", (e)=>{ e.preventDefault(); var file = e.target.files[0]; if (e.target.files.length === 1 && e.target.files !== undefined && e.target.files !== null && file.type.match('image.*')) { console.log("if okay"); } else { //preciso entender o que devo fazer aqui para verificar se há arquivo no DOM desse target caso, o usuário cancele a seleção, para evitar que se há um arquivo no DOM esse permaneça. console.log(file); //CASO O USUÁRIO CANSELA A SELEÇÃO, RETORNA undefined } }); /script
      O if está correto, porém o que falta é o que fazer no else. Agradeço desde já.
    • Por luiz monteiro
      Olá. Tenho 3 formulários em uma mesma pagina, onde cada um tem 1 input type text.
      O que preciso é recuperar o nome desses inputs e o valor correspondente ao formulário submetido.
      =============
      form name="formulario1" id="formulario1"
      input type="text" name="nome1" value="valor1" /form
      form name="formulario2" id="formulario2"
      input type="text" name="nome2" value="valor2" /form
      form name="formulario3" id="formulario3"
      input type="text" name="nome3" value="valor3" /form
      =============
      ..........
      var formulario_submetido = document.getElementById("formulario1"); formulario_submetido.addEventListener('submit', function(e) { e.preventDefault(); //tentei console.log(document.querySelectorAll('#'+this.id + ' input').name); //tentei var formula = new FormData(formulario_submetido); console.log(formula.input['type=text'].name); //tentei console.log(formula.get(input['type=text']).name); ..........
        no console.log(e), ele está nessa hierarquia   form -> srcElement -> input -> attributes -> name 
      Como recupero o valor do name dele e o valor do value?
       
      Agradeço desde já.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.