1

Pessoal tenho a seguinte página, que funciona da seguinte maneira: O usuário digita o nome da cidade, clica no botão de busca onde ele trás os resultados correspondentes a busca em uma tabela. Ao clicar na tabela, escolhendo o resultado desejado, é exibido um pop-up com o nome da cidade e sua id no banco de dados, limpando também a página.

O que eu preciso fazer, é ao invés de abrir esse pop-up, a página ser atualizada, trazendo o conteúdo do banco de acordo com uma consulta usando a id recuperada no click, e exibindo na mesma pagina, um html exibindo um link e uma imagem (sendo estes trazidos na consulta SLQ usando a ID obtida no click).

Sou totalmente leigo em Js, então não consegui uma solução para o problema...

<?php include_once 'conexao.php' 
?>

<html>
<head>

    <title>INDEX Foruns Regionais</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script text="text/javascript">

    function mostraConteudo(elemento) {
      esconde();
      var id = elemento.dataset.id;
      var nome = elemento.innerHTML;
      mostraResultado(id,nome)
      }   

    function mostraResultado(id, nome){
      alert('Código: '+id+'\nCidade: ' +nome);

    }

    function esconde() {
      $('.table td').hide();
      }

        $(document).ready(function(){
        $("p").click(function(){
            $(this).fadeOut();
        });
    });


  </script>


</head>
  <body>

   <h1>Pesquisa cidade</h1>

    <form onclick="" name="formulario_busca" method="post"/>
        <input type="text" name="nome_cidade"/>
        <input type="submit" name="busca"/>

        </form>

        <?php

        $busca = $_POST['nome_cidade'];

        $query = "SELECT id,cidade FROM cidades WHERE cidade LIKE '%".$busca."%'";
        $resultado = mysqli_query($conexao, $query);
        mysqli_fetch_array($resultado,$lista_Cidades);
        ?>

          <table class="table table-striped table-bordered"> 

            <?php
            if ((mysqli_num_rows($resultado)>0) && ($busca != "") ):
            while ($linha = mysqli_fetch_assoc($resultado)) { 
            ?>

            <tr>
                <td data-id="<?= $linha['id']?>" onclick="mostraConteudo(this)"><?= $linha['cidade']?></td>
            </tr>

            <?php

            } echo "<br/>";
            endif;  if(mysqli_num_rows($resultado)<=0):
            echo "Cidade não encontrada";
            endif;
            ?>

    </table>
  </body>
</html>

1 Resposta 1

1

O que você precisa é definir qual elemento vai receber a resposta, e preencher.

Da pra fazer com Javascript puro, ou com jQuery, como você mesmo disse que é leigo em JS, recomendo jQuery por ter um leitura mais fácil.

Você precisa substituir essa função:

function mostraResultado(id, nome){
      alert('Código: '+id+'\nCidade: ' +nome);
}

Por algo que preencha um elemento, no seu caso, adicione uma div antes ou depois do form com:

<div id='resposta' style='display:none'></div>

E altere sua função ( a que foi citada a cima):

function mostraResultado(id, nome){
    $('#resposta').show().html('Código: '+id+'\n Cidade: ' +nome);
}
3
  • Funciona perfeitamente. Mas existe alguma maneira da div de nome resposta ser exibida somente ao ser chamada pelo JQuery? 11/09/2017 às 13:28
  • Atualizei a resposta pra isso, só definir a div como hidden, e dar um show(). 11/09/2017 às 13:35
  • Perfeito! Muito obrigado! 11/09/2017 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .