how to fill a specific place of a FIXED table with the return of a JSON?

Question

I 'm programming the schedule in PHP with MySQL.

I currently have a jQuery datepicker that return a select based on the date you select. Then I have a JSON return from AJAX.

I have a table that contain 23 <td> where each line is in 30-30 minutes (like 8:00. 8:30.9:00 until 19:00).

What I need is fill each place with the return of my array that contain a time and a description scheduled. If no query scheduled in a time it show something like "available time". But I need that table fixed there for always.

This is the code I have for while:

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

                            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>

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

json return

[
    {
        "agendaId":"9",
        "dentistaId":"2",
        "dataAgenda":"2015-12-12",
        "horaAgenda":"08:30",
        "descricaoAgenda":"Protese2"
    }
]

[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Dec 11 '15 at 19:55
Why not put the time's in an array and simply loop over it and append? — Gjohn, Dec 11 '15 at 20:21
i m a new student from javascript.. can you simplify what you said, please? or if possible write me an example of this loop append.. thanks — Fernando Fefu, Dec 11 '15 at 20:55

Gjohn · Answer 1 · 2015-12-11T21:35:25.333

0

Try this

...
lista += '<td>9:00</td>'
lista += '<td><span id='09:00'></span></td>'

Your jQuery then can simply do this

data = [
   {
    "agendaId":"9",
    "dentistaId":"2",
    "dataAgenda":"2015-12-12",
    "horaAgenda":"08:30",
    "descricaoAgenda":"Protese2"
   }
];

for (var i = 0; i < data.length; i++)
{
     $("#" + data[i].horaAgenda).innerText(....);
}

edited Dec 11 '15 at 21:35

answered Dec 11 '15 at 20:42

Gjohn

1,261
1
8
12

i can have more than one return.. in this example the return is 08:30am so i want to put this description(descricaoAgenda) into the 08:30 from the table.. imagine if i have another one with the time 17:00pm.. then only 08:30 and 17:00 will be filled with the description.. but the table will be there with all others time NULL description – Fernando Fefu Dec 11 '15 at 20:53
Right, you would for that loop through your array in data and associate each of them to the appropriate slots. – Gjohn Dec 11 '15 at 21:11
exactly.. any idea how can i do this? – Fernando Fefu Dec 11 '15 at 21:18

how to fill a specific place of a FIXED table with the return of a JSON?

1 Answers1