Handle the JSON data coming from a request from the jQuery datepicker with ajax

Question

Handle the JSON data coming from a request from the jQuery datepicker with ajax

Navigation

#1 by (0 votes)

2

I need to create a schedule. I have a datepicker and a fixed table next to it with schedules that start from 08:00 am until 19:00 pm and when I click on a datepicker day it returns all the queries from that day in the table to side in their respective schedules .. if you have a vacant schedule should appear null .. My problem is that I am not able to manipulate the data that ajax returns me (json) I am getting the data in array but I can not put them in their proper place in the table ..

follow my codes:

javascript:

<script>
        $(document).ready(function()  {
        $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        nextText: 'Próximo',
        prevText: 'Anterior',
        inline: true,

         onSelect: function () {
            var date = $("#datepicker").val();

            $.ajax({
                 type: "POST", 
                 url: "retornar_data.php",
                 data: { date: date },
                 success: function(data) {
                      $.each($.parseJSON(data), function(chave,valor){

                          console.log(data);

                        var lista = '<table border="1">'
                        lista += '<th> Hora </th>';
                        lista += '<th> Data </th>';
                        lista += '<th> Descrição </th>';
                        lista += '<tr>'
                        lista += '<td>8:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>8:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>9:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>9:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>10:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>8:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>10:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>11:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>11:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>12:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>12:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>13:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>13:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>14:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>14:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>15:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>15:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>16:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>16:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>17:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>17:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>18:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>18:30</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '<td>19:00</td>'
                        lista += '<td> </td>'
                        lista += '<tr>'
                        lista += '</table>';

                     $('#teste').html(lista);


                     });



                 },
                     error: function() {
                     alert("Error.");
                 }
            });
        }
    });
});


      </script>

return_data.php

<?php 


 $date = $_POST['date'];

$conecta = mysqli_connect("localhost","root","","odonto");

$selecao = "SELECT * from agenda WHERE dataAgenda = '{$date}' ";
$categorias = mysqli_query($conecta,$selecao);

$retorno = array();
while($linha = mysqli_fetch_object($categorias)) {
    $retorno[] = $linha;
}   

echo json_encode($retorno);

// fechar conecta
mysqli_close($conecta); ?>

html:

 <body>


    <div id="datepicker"></div> <br>
    <div id="teste"> </div>





</body>

Return from when I click on the date:

[{"agendaId":"4","dentistaId":"2","dataAgenda":"2015-12-03","horaAgenda":"09:30","descricaoAgenda":"Aparelho"},{"agendaId":"8","dentistaId":"3","dataAgenda":"2015-12-03","horaAgenda":"11:30","descricaoAgenda":"Peixe"}]

I need a light to continue I'm stuck after receiving parseJson .. How can I do to check the received values check if it contains, for example, 08:30 and if yes insert the id description of this schedule in the table?

php jquery ajax json datepicker

asked by anonymous 11.12.2015 / 18:57

1 answer

Doubt - Visual Studio Export / Import Project Script (automate fields of a site) [closed]

score 0 · Accepted Answer

Just replace jsonResposta with data do ajax and see it work, it's quite simple, I just used a for to traverse the object and create the table.

Detail, if you use json_encode in php there is no need to $.parseJSON(data) in javascript because the data will already come correct.

I changed the date in json, if you click on day 22 and 03 will have schedules for that date.

var jsonResposta = [{
  "agendaId": "4",
  "dentistaId": "2",
  "dataAgenda": "2015-12-22",
  "horaAgenda": "09:30",
  "descricaoAgenda": "Aparelho"
}, {
  "agendaId": "8",
  "dentistaId": "3",
  "dataAgenda": "2015-12-03",
  "horaAgenda": "11:30",
  "descricaoAgenda": "Peixe"
}];



$(document).ready(function() {
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    nextText: 'Próximo',
    prevText: 'Anterior',
    inline: true,

    onSelect: function() {
      var date = $("#datepicker").val();
      console.log(date);
      var lista = '<table border="1">';
      lista += '<th> Hora </th>';
      lista += '<th> Data </th>';
      lista += '<th> Descrição </th>';
      for (var x in jsonResposta) {
        console.log(jsonResposta[x]);
        if (date === jsonResposta[x]['dataAgenda']) {
          lista += '<tr><td>' + jsonResposta[x]['horaAgenda'] + '</td>';
          lista += '<td>' + jsonResposta[x]['dataAgenda'] + '</td>';
          lista += '<td>' + jsonResposta[x]['descricaoAgenda'] + '</td></tr>';
        }
      }
      lista += '</table>'


      $('#teste').html(lista);


    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" media="screen">
<div id="datepicker"></div>
<div id="teste"></div>