Fill table with database data via Ajax

Question

I am very confused. I am creating an application with PHP and PDO. I have a page where there is a table with my database data. At first, it already makes the query in the bank and stores the result in $result to popular my table:

<?php
session_start();
include('autenticacao/verifica.php');
include('class/DiagnosticoModel.php');

$consulta = new DiagnosticoModel();

$result = $consulta->select();

?>

My table:

<div class="card-body table-responsive">
                                        <table class="table table-hover table-bordered">
                                            <thead>
                                                <tr class="table-cs">
                                                    <th>Ticket</th>
                                                    <th>Solicitante</th>  
                                                    <th>Data Início</th>
                                                    <th>Data de entrega</th>
                                                    <th>Status</th>
                                                    <th>Observação</th>
                                                    <th>Ação</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <?php
                                                    foreach ($result as $chave => $valor) { ?>
                                                        <td><?php echo $valor['ticket'] ?></td>
                                                        <td><?php 
                                                        if ($valor['data_inicio'] != 0) {
                                                            echo date("d/m/Y", strtotime($valor['data_inicio'])) ;
                                                        }
                                                        ?></td>
                                                        <td>
                                                        <?php 
                                                        if ($valor['data_termino'] != 0) {
                                                            echo date("d/m/Y", strtotime($valor['data_termino'])); }?></td>
                                                        <td><?php echo $valor['status'] ?></td>
                                                        <td style="width:300px"><?php echo $valor['observacao'] ?></td>
                                                        <td>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-cs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <i class="fas fa-cogs"></i>

                                                                </button>
                                                                <div class="dropdown-menu">
                                                                    <button name="btn-atualizar" class="dropdown-item" data-toggle="modal" data-target="#modal-atualizar<?echo $valor['iddiagnostico'];?>">Atualizar</button>
                                                                    <div class="dropdown-divider"></div>
                                                                    <button name="btn-visualizar" class="dropdown-item" data-toggle="modal" data-target="#modal-visualizar<?echo $valor['iddiagnostico'];?>">Visualizar Solicitação</button>
                                                                </div>
                                                            </div>
                                                        </td>
                                                </tr>

So, I created 2 buttons, 1 to update and another to list data from the selected line. The buttons open modals with the information, and then to update, I make a new query to the bank, only it does not update the table at the same time, so I would like to use Ajax...

My question. I need to delete this initial part of PHP that makes the query and brings the data to the table? To do this with ajax? And if so, how can I do, since I’ve seen that you usually do so:

$.ajax({
        url: 'index.php',
        type: 'POST',
        data: '<?php echo "teste"; ?>',
        success: function(r) {
         $('body').html(r);
    }
}); 

(I got this code from the Internet) In this part of "DATA", are the data that I pass to do some research, some update, but since I have no parameter, I just want to request and receive the data, I need to fill this "date"? And do I need some other php helper page to put in the URL? Because I would like to do everything on that same page.

I don’t know if you can understand my doubt.

Answer 1

Good from what I understand you have a page that already loads the data, synchronously, in backend with php and after loaded you want to update them as user description.

You should define how you want to do this, if you synchronously need to return another php page with the updated data, because you are not using MVC (Model,View,Controller), I will not go into detail about it but then study about.

In this case, yes your best solution is to use AJAX to make the asynchronous request. in the date field are actually the data you want to send to the server and in the sucess field are the data returned from the server, which after returned should be worked in a way that changes the DOM.

Basically you have to mount a request to your server and after the answer change the DOM so that it fits the data where you want. I’ll give you some links so you can better understand about asynchronous requests, jquery and DOM.

https://www.devmedia.com.br/ajax-com-jquery-trabalhando-com-requisicoes-assincronas/37141 https://webdesign.tutsplus.com/pt/tutorials/a-beginners-guide-to-ajax-with-jquery--cms-25126 https://www.w3schools.com/jquery/ajax_ajax.asp https://spigandoeaprendendo.wordpress.com/2014/03/06/jquery-introducao-a-manipulacao-do-dom-pegando-e-atribuindo-conteudo-text-html-and-val/ https://eufacoprogramas.com/jquery-principais-comandos-para-manipulacao-do-dom/