Refresh HTML page content with Javascript using data queried with SQL

Question

Refresh HTML page content with Javascript using data queried with SQL

Navigation

#1 by (1 votes)

1

Personal I have the following page, which works as follows: The user types the name of the city, clicks the search button where it brings the results matching the search in a table. When clicking on the table, choosing the desired result, pops up 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 popup, the page being updated, bringing the contents of the database according to a query using the id retrieved 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'm totally lay in Js, so I did not get 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><scripttext="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

asked by anonymous 11.09.2017 / 15:06

1 answer

Ajax Success - actions at Ajax response time Error: $ injector: modulerr Module Error - I can not resolve [closed]

score 1 · Accepted Answer

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

To do with pure Javascript, or with jQuery, as you yourself said you are lay in JS, I recommend jQuery for having an easier reading.

You need to override 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 (which was quoted above):

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