how to put the return of a json in a specific place of a table?

Asked

Viewed 216 times

0

I have a fixed table with schedules from 08:00am to 19:00pm each has its line with its description(that would be the type of query)

I receive a json on my page when selecting a date on my datepicker jQuery that comes with the database information. in this bank what we care is the appointment schedule and her type..

What I need to do is check the schedules on this return and put his description in its proper place on the table. for example: I have 2 queries, one at 08:00am and the other at 17:00pm (remembering that each one has its description). I need to put these descriptions in the table that is already created in the schedules 08:00 and 17:00.. as for the other schedules leave empty

Follows my code:

html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Agenda</title>
        <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">
 </head>

     <body>

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

    <table border="1">  
    <tr>
        <td>08:00</td>
        <td> </td>
    </tr> 
    <tr>
        <td>8:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>9:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>9:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>10:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>10:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>11:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>11:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>12:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>12:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>13:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>13:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>14:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>14:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>15:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>15:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>16:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>16:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>17:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>17:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>18:00</td>
        <td> </td>
    </tr>
    <tr>
        <td>18:30</td>
        <td> </td>
    </tr>
    <tr>
        <td>19:00</td>
        <td> </td>
    </tr>          
  </table> 

    </body>
</html>

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);

</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);
?>

example of my return json

[{"agendaId":"2","dentistaId":"1","dataAgenda":"2015-12-02","horaAgenda":"08:30","descricaoAgenda":"Restauracao"},{"agendaId":"3","dentistaId":"2","dataAgenda":"2015-12-02","horaAgenda":"09:00","descricaoAgenda":"Protese"}]
php javascript jquery json datepicker

1 answer

0


Agenda 

<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 data = [
                    { "agendaId": "2", "dentistaId": "1", "dataAgenda": "2015-12-02", "horaAgenda": "08:30", "descricaoAgenda": "Restauracao" },
                    { "agendaId": "3", "dentistaId": "2", "dataAgenda": "2015-12-02", "horaAgenda": "09:00", "descricaoAgenda": "Protese" }
                ];

                $.each(data, function(i, item) {
                    alert(item.descricaoAgenda);

                    $('#tableSchedule tr').each(function (x, el) {

                        var tr = $(el).find('td');

                        var hora = $(tr[0]).text();
                        var descricao = $(tr[1]).text();

                        if (hora.length == 4) hora = '0' + hora;

                        if (hora == item.horaAgenda)
                            $(tr[1]).html(item.descricaoAgenda);

                        //alert(hora + ' - ' + descricao);
                    })


                })




            }
        });
    });


</script>


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

<table id="tableSchedule" border="1">
    <tr>
        <td>08:00</td>
        <td></td>
    </tr>
    <tr>
        <td>8:30</td>
        <td></td>
    </tr>
    <tr>
        <td>9:00</td>
        <td></td>
    </tr>
    <tr>
        <td>9:30</td>
        <td></td>
    </tr>
    <tr>
        <td>10:00</td>
        <td></td>
    </tr>
    <tr>
        <td>10:30</td>
        <td></td>
    </tr>
    <tr>
        <td>11:00</td>
        <td></td>
    </tr>
    <tr>
        <td>11:30</td>
        <td></td>
    </tr>
    <tr>
        <td>12:00</td>
        <td></td>
    </tr>
    <tr>
        <td>12:30</td>
        <td></td>
    </tr>
    <tr>
        <td>13:00</td>
        <td></td>
    </tr>
    <tr>
        <td>13:30</td>
        <td></td>
    </tr>
    <tr>
        <td>14:00</td>
        <td></td>
    </tr>
    <tr>
        <td>14:30</td>
        <td></td>
    </tr>
    <tr>
        <td>15:00</td>
        <td></td>
    </tr>
    <tr>
        <td>15:30</td>
        <td></td>
    </tr>
    <tr>
        <td>16:00</td>
        <td></td>
    </tr>
    <tr>
        <td>16:30</td>
        <td></td>
    </tr>
    <tr>
        <td>17:00</td>
        <td></td>
    </tr>
    <tr>
        <td>17:30</td>
        <td></td>
    </tr>
    <tr>
        <td>18:00</td>
        <td></td>
    </tr>
    <tr>
        <td>18:30</td>
        <td></td>
    </tr>
    <tr>
        <td>19:00</td>
        <td></td>
    </tr>
</table>

  • Can you explain to us better how this could answer the question?

  • @Danilo First I went through the return json, then for each Json record, I went through the table by comparing the times of the record with each row of the table

  • @I damage this chunk of code that runs the entire $.each(data, Function(i, item) { $('#tableSchedule tr'). each(Function (x, el) { var tr = $(el). find('td'); var hora = $(tr[0]). text(); var Description = $(tr[1]). text(); if (time.length == 4) time = '0' + time; if (time == item.schedule) $(tr[1]). html(item.descricationAgenda); }) })

  • you can put this in your answer so users can see your solution better?

Browser other questions tagged php javascript jquery json datepicker

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