Handle JSON data coming from a jQuery datepicker request with ajax

Asked

Viewed 1,167 times

2

I need to create an agenda.. I have a datepicker and a fixed table beside with schedule that start from 08:00am until 19:00pm and when I click on a datepicker day it returns to me all the queries of that day in the table beside in their respective schedules.. If you have an open schedule, it should be null.. My problem is that I am not able to manipulate the data that ajax returns me (json) I am able to get the data in array but I cannot place it in its proper place of table..

follows 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>

ret_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 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 the parseJson.. How can I check the values received check if it contains, for example, 08:30 and if yes insert the description of the id of this time in the table?

php jquery ajax json datepicker

  • Fernando, could you show an example of the return of json ?

  • Hi Highlander, I put there the question already, but anyway this is my return: [{"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"}]

1 answer

0


Just replace the jsonResposta for data do ajax and watch it work, it’s very simple, I just used a for to go through the object and create the table.

Detail, if you use json_encode in php no need to do $.parseJSON(data) in javascript why the data will already be correct.

I changed the date in json, if you click on day 22 and 03 you 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>
<script src="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>

  • sorry I forgot to specify the line of scripts.. I already have the datepicker running.. the problem is at the time I have the return of the data I do not know how to put them in the right place of the table

  • @Fernandofefu I know, I took your return and I’m mounting the answer, this is an example I will edit it

  • ah tah.. thanks @Highlander

  • How do I keep the table fixed already with all the schedules?? so just add the direct description in the query that is scheduled and the others (that are empty) continue to appear even empty

  • The way you’re doing it, you’ll have to put all your schedules in the database. it is possible to leave a predefined table with all the schedules and only fill them with the description if they are in the return of ajax, but this is not the question.

  • Is there any simpler way I can maintain this bank structure? something like a loop to go through the json looking for the X time and find itself filling the description in the X space of my fixed table.. always showing the table even empty in the other schedules? I thank you for your attention.

Show 1 more comment

Browser other questions tagged php jquery ajax json datepicker

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