Update content of the HTML page with Javascript using SQL queried data

Asked

Viewed 916 times

1

People have the following page, which works as follows: The user type the name of the city, click on the search button where he brings the results corresponding to the search in a table. By clicking on the table, choosing the desired result, a pop-up is displayed with the name of the city and its id in the database, also cleaning the page.

What I need to do, is instead of opening this pop-up, the page be updated, bringing the contents of the database according to a query using the id recovered in the click, and displaying on the same page, an html displaying a link and an image (these being brought in the SLQ query using the ID obtained in the click).

I am totally layman in Js, so I could not find a solution to the problem...

<?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>
php javascript html ajax

1 answer

1


What you need is to define which element will receive the answer, and fill in.

You can do it with pure Javascript, or with jQuery, as you said yourself you are a layman in JS, I recommend jQuery for having an easier read.

You need to replace this function:

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

For something that fills an element, in your case, add a div before or after the form with:

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

And change your function ( the one quoted above):

function mostraResultado(id, nome){
    $('#resposta').show().html('Código: '+id+'\n Cidade: ' +nome);
}

  • Works perfectly. But is there any way that the answer name div is displayed only when called by Jquery?

  • I updated the answer to that, just define the div as Hidden, and give a show().

  • Perfect! Thank you very much!

Browser other questions tagged php javascript html ajax

You are not signed in. Login or sign up in order to post.