query result without refresh JS

Asked

Viewed 63 times

-1

Aloha, when the client enters my application he will see a form for scheduling, is there any way to pass the information without giving refresh? when the customer selects the day, shows the opening hours, after choosing the time, only show the employees with the available schedule.

FORM:

<form method="post" action="<?php echo pg.'/arquivos/registra_agendamento.php';?>">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="row">
<div class="col-md-4 grid-margin stretch-card">
 <div class="card">
  <div class="card-body">
     <div class="charts-data">
        <div class="form-group">
           <label>Data:</label>
           <input type="date" class="form-control form-control-sm" name="dia" data-inputmask="'alias': 'date'" />
        </div>
        <div class="form-group">
           <label>Hora: </label>
           <select class="form-control form-control-sm" name="hora">
              <option value=""></option>
              <?php
                 $query_hora = "SELECT * FROM funcionamento ORDER BY hora ASC";
                 $result_hora = mysqli_query($conectar, $query_hora);
                 while ($linhas_hora = mysqli_fetch_assoc($result_hora)){
                   $hora = $linhas_hora['hora'];
                   echo "
                     <option value='".$hora."'>".$hora.":00</option>
                   ";
                 }
                 ?>                      
           </select>
        </div>
        <?php
           if(o input dia == $hoje){
           $query_agenda = "SELECT * FROM agendamento WHERE dia='o input dia' AND hora='$hora'";
            $result_agenda = mysqli_query($conectar, $query_agenda);
            while ($linhas_agenda = mysqli_fetch_assoc($result_agenda)){
            $agendado = $linhas_agenda['func'];

            $query_fun = "SELECT * FROM funcionarios WHERE nome!='$agendado' AND nivel='3' AND estado='1' AND atend='1' ORDER BY nome ASC";
            $result_fun = mysqli_query($conectar, $query_fun);
            while ($linhas_fun = mysqli_fetch_assoc($result_fun)){
            $fun_nome = $linhas_fun['nome'];
            $img_fun = pg.'/images/funcionarios/'.$linhas_fun['img'].'.jpg';
               echo "
                 <div class='d-flex align-items-center py-3 border-bottom'>
                   <img class='img-sm rounded-circle' src='".$img_fun."' alt='".$fun_nome."'>
                   <div class='ml-3'>
                     <h5 class='mb-1 font-weight-bold'>".$fun_nome."</h5>
                   </div>
                 </div>
               ";
             }}
           }else{
           $query_agenda = "SELECT * FROM agendamento WHERE dia='$dia' AND hora='$hora'";
            $result_agenda = mysqli_query($conectar, $query_agenda);
            while ($linhas_agenda = mysqli_fetch_assoc($result_agenda)){
            $agendado = $linhas_agenda['func'];

            $query_fun = "SELECT * FROM funcionarios WHERE nome!='$agendado' AND nivel='3' AND estado='1' ORDER BY nome ASC";
            $result_fun = mysqli_query($conectar, $query_fun);
            while ($linhas_fun = mysqli_fetch_assoc($result_fun)){
            $fun_nome = $linhas_fun['nome'];
            $img_fun = pg.'/images/funcionarios/'.$linhas_fun['img'].'.jpg';
            echo "
                 <div class='d-flex align-items-center py-3 border-bottom'>
                   <img class='img-sm rounded-circle' src='".$img_fun."' alt='".$fun_nome."'>
                   <div class='ml-3'>
                     <h5 class='mb-1 font-weight-bold'>".$fun_nome."</h5>
                   </div>
                 </div>
               ";
             }}
           }
           ?>
        <div class="form-group">
           <input type="text" class="form-control form-control-sm" id="obs" name="obs" placeholder="Obs">
        </div>
        <div class="card-footer text-center">
           <button type='submit' class="btn btn-dark btn-rounded btn-fw">Agendar</button></a>
        </div>
     </div>
  </div>
</div>
</div>
</div>
</div>
</form>
php javascript ajax

1 answer

1


You can do this update without refreshing using jquery and ajax. First, in the time selection select you add a call to a function (Verifiable) javascript passing the value of select itself as parameter, the structure of your form’s page would look like this:

<form method="post" action="<?php echo pg.'/arquivos/registra_agendamento.php';?>">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="row">
<div class="col-md-4 grid-margin stretch-card">
 <div class="card">
  <div class="card-body">
     <div class="charts-data">
        <div class="form-group">
           <label>Data:</label>
           <input type="date" class="form-control form-control-sm" name="dia" data-inputmask="'alias': 'date'" id="dataAgenda" />
        </div>
        <div class="form-group">
           <label>Hora: </label>
           <select class="form-control form-control-sm" name="hora" onchange="VerificarDisponivel(this.value);">
              <option value=""></option>
              <?php
                 $query_hora = "SELECT * FROM funcionamento ORDER BY hora ASC";
                 $result_hora = mysqli_query($conectar, $query_hora);
                 while ($linhas_hora = mysqli_fetch_assoc($result_hora)){
                   $hora = $linhas_hora['hora'];
                   echo "
                     <option value='".$hora."'>".$hora.":00</option>
                   ";
                 }
                 ?>                      
           </select>
        </div>

        <div id="resposta"></div>

        <div class="form-group">
           <input type="text" class="form-control form-control-sm" id="obs" name="obs" placeholder="Obs">
        </div>
        <div class="card-footer text-center">
           <button type='submit' class="btn btn-dark btn-rounded btn-fw">Agendar</button></a>
        </div>
     </div>
  </div>
</div>
</div>
</div>
</div>
</form>

Now there is a div with id answer where the information coming from the database will be updated.
The javascript function Verifiable would be as follows:

function VerificarDisponivel(hora){
    $.ajax({
        type: "POST",
        url: "agendamento.php",
        data: {'hora': hora , 'dataAgenda' : $('#dataAgenda').val()},
        success: function(html){
            $('#resposta').html(html);
        }
    });
}

And finally, the file php scheduling. who will be responsible for consulting in the database the information return the information in the way you want:

$hora = $_POST['hora'];
$dataAgenda = $_POST['dataAgenda'];

if($dataAgenda == $hoje){
   $query_agenda = "SELECT * FROM agendamento WHERE dia='o input dia' AND hora='$hora'";
    $result_agenda = mysqli_query($conectar, $query_agenda);
    while ($linhas_agenda = mysqli_fetch_assoc($result_agenda)){
    $agendado = $linhas_agenda['func'];

    $query_fun = "SELECT * FROM funcionarios WHERE nome!='$agendado' AND nivel='3' AND estado='1' AND atend='1' ORDER BY nome ASC";
    $result_fun = mysqli_query($conectar, $query_fun);
    while ($linhas_fun = mysqli_fetch_assoc($result_fun)){
    $fun_nome = $linhas_fun['nome'];
    $img_fun = pg.'/images/funcionarios/'.$linhas_fun['img'].'.jpg';
       echo "
         <div class='d-flex align-items-center py-3 border-bottom'>
           <img class='img-sm rounded-circle' src='".$img_fun."' alt='".$fun_nome."'>
           <div class='ml-3'>
             <h5 class='mb-1 font-weight-bold'>".$fun_nome."</h5>
           </div>
         </div>
       ";
     }}
 }else{
   $query_agenda = "SELECT * FROM agendamento WHERE dia='$dia' AND hora='$hora'";
    $result_agenda = mysqli_query($conectar, $query_agenda);
    while ($linhas_agenda = mysqli_fetch_assoc($result_agenda)){
    $agendado = $linhas_agenda['func'];

    $query_fun = "SELECT * FROM funcionarios WHERE nome!='$agendado' AND nivel='3' AND estado='1' ORDER BY nome ASC";
    $result_fun = mysqli_query($conectar, $query_fun);
    while ($linhas_fun = mysqli_fetch_assoc($result_fun)){
    $fun_nome = $linhas_fun['nome'];
    $img_fun = pg.'/images/funcionarios/'.$linhas_fun['img'].'.jpg';
    echo "
         <div class='d-flex align-items-center py-3 border-bottom'>
           <img class='img-sm rounded-circle' src='".$img_fun."' alt='".$fun_nome."'>
           <div class='ml-3'>
             <h5 class='mb-1 font-weight-bold'>".$fun_nome."</h5>
           </div>
         </div>
       ";
     }}
   }

  • I applied the fixes, put the <script> on top of the 'reply' div, created the.php scheduling file (started Session, include the.php connection and includes the $today date) yet do not print any information in the 'reply' div. what can be ?

  • @Ronaldodelima does the following, change the function Verifiable: under the line $('#reposta').html(html);add console.dir(html); to check whether the php scheduling. is returning something.

  • in onchange or script?

  • @Ronaldodelima in the script

  • returned nothing

  • @Ronaldodelima has to see in php scheduling., tries to take out all the code and put a simple select, without if, with nothing just to return something, then you build.

  • I took everything and left only one echo $hour and $dataAgenda. not yet printed anything

  • tested in various ways, by the way to using url friendly, has influence?

  • Let’s go continue this discussion in chat.

Show 4 more comments

Browser other questions tagged php javascript ajax

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