Fill table without refresh?

Question

Fill table without refresh?

Navigation

#1 by (0 votes)

0

I have a code that works with two dropdowns that automatically update themselves using jQuery, where when selecting one, the other is populated by doing the filter in my database. And just below, I have a table that I want to fill it with the values that will be filtered with the results chosen in the two dropdowns, and preferably done without refreshing the page. Is it possible?

I'm using non-object-oriented PHP.

Dropdowns:

    <div class="col-sm-3 col-sm-offset-2">
        <form action="#">
            <div class="form-group">
            <label id="drops-labels"><b id="centraliza-txt">REDE</b></label>
            <span data-toggle="tooltip" data-placement="top" title="ESCOLHA A REDE">
            <select name="estados" id="estados" class="form-control input-sm">
                <option value="0">---Selecione---</option>
   <?php
    $result = mysql_query("select distinct Rede_m1, id_rede from indicadores_rv where Supervisor_m1 = '".$_SESSION['usuarioNome']."' order by rede_m1"); 
    while($row = mysql_fetch_array($result) ){
            echo "<option value='".$row['id_rede']."'>".$row['Rede_m1']."</option>";    }
?>
          </select>
          </span>
           </div>
        </form>
    </div>
 <div class="col-sm-3">
        <label id="drops-labels"><b id="centraliza-txt">LOJA</b></label>
        <select name="cidades" id="cidades" class='form-control input-sm'">
              <option value="0">---Selecione---</option>
        </select>   
</div>

Calling jquery:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#estados').change(function(){
                    $('#cidades').load('cidades.php?estado='+$('#estados').val() );
                });
            });

        </script>

Cities.php

        <?php
   $idestado = $_GET['estado'];
    require 'conecta.php'; 
    $result = mysql_query("SELECT * FROM indicadores_rv WHERE id_rede  ".$idestado);

        while($row = mysql_fetch_array($result) ){
            echo "<option value='".$row['id_rede']."'>".$row['Loja_m1']."</option>";
           }

        ?>

And the table that I want to put the data (I have not yet put the variables pq I do not know how I should do in this case)

<div class="table-responsive"><!-- div de tabela responsivo -->
    <table class="table table-hover table-bordered table-striped" id="tabela_formatada"> <!-- pode misturar os tables -->
    <thead>
        <tr>
            <th id="tab3"><b> </b></th>
            <th id="tab3"><b>D-1</b></th>
            <th id="tab3"><b>W</b></th> 
            <th id="tab3"><b>M</b></th>
            <th id="tab4"><b>M-1</b></th>                       </tr>
    </thead>
    <tbody>
        <tr>
            <td id="tab99"><b># CPF Enviados</b></td>
            <td id="tab0"><b><!--variáveis aqui --></b></td>
            <td id="tab0"><b><!--variáveis aqui --></b></td>
            <td id="tab0"><b><!--variáveis aqui --></b></td>
            <td id="tab0"><b><!--variáveis aqui --></b></td>
        </tr>

php jquery ajax twitter-bootstrap

asked by anonymous 18.07.2016 / 18:25

1 answer

Permission to access a PHP + AD + Oracle system Stop or cancel asynctask

score 0 · Answer 1

Good afternoon, mate. When calling your query, you should use the results to assemble the HTML and place it in the table. I particularly prefer to use POST instead of GET.

Try:

//Chamando a query
$(document).ready(function() {
$("#estados").bind("change", function(event) {
    $.ajax({
        async: true,
        data: {estado: $("#estados").val()},
        dataType: "html",
        success: function(data) {
            //"data" = echo do seu PHP.
            $("#ONDE_IRA_O_HTML").html(data);
        },
        type: "POST",
        url: "SUA_URL/cidade.php"
    });
    return false;
});
});

Get your data from JS to PHP as follows:

 $idestado = $_POST['estado'];
//ao invés de $_GET, usaremos $_POST

What you give ECHO in your PHP will be received as the variable "date" in the function of the success method of your ajax. Hence you can assemble the data and put it in its proper place. You can assemble your HTML as follows:

 $html = "";
 while($row = mysql_fetch_array($result) ){
        $html = $html . "<option value='".$row['id_rede']."'>".$row['Loja_m1']."</option>";
       }
//Damos echo no html pronto para ser recebido com nosso JS na função do método success
echo $html;
exit();