Modal Bootstrap data insertion with PHP OO

Question

I am developing a client registration screen with PHP OO but due to my inexperience I am finding it difficult to list client data within a Modal Bootstrap.

First, I have this list of Client Objects where I present only some basic data of registered customers: Code:

     <?php
              foreach ($cliente->buscarClientes() as $key => $value){
                echo "<tr>
                    <td><input type='checkbox' value='$key'</td>
                    <td>".$value->getNome()."</td>
                    <td>".$value->getCpf()."</td>
                    <td>".$value->getEmail()."</td>
                    <td>".$value->getDataCadastro()."</td>
                    <td>
                        <a href='#' data-toggle='modal' data-target='#modalCliente' data-clientmodal='$key'><i class='fa fa-edit' title='Editar'> </i></a>
                        <a href='#'> <i class='fa fa-trash' title='Excluir'> </i> </a>
                    </td>
                </tr>";
              }
            ?>

Note: searchClients() returns an Array of Client objects where the index is the client ID.

Modal:

Jquery code of the modal Bootstrap:

   <script>
        $(function () {

          // Modal editar/inserir cliente
          $('#modalCliente').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('clientmodal') // Extract info from data-* attributes

            var modal = $(this)
            if(recipient !== null){ 
              modal.find('.modal-title').text('Editar Cliente (#' + recipient + ")")
              modal.find('.modal-body input#modal-idml').val("example")
            } else {

               modal.find('.modal-title').text('Novo cliente')
            } 

          })

        });
  </script>

I would like the user to press the pencil icon Modal open with all the data of the respective customer to be able to edit them, if possible reusing the object that is already created. I tried to use AJAX in some ways, but I didn’t understand how to use it for that purpose.

Could you help me and if possible exemplify how I do it?

Answer 1

A hint of how I would make it if I understood you can do it your way, I would create a new folder with a php -> "data.php" file and when I click on the button to open the modal .

var acess;
if(window.XMLHttpRequest) {
acess = new XMLHttpRequest();

}

else if(window.ActiveXObject) {
acess = new ActiveXObject("Microsoft.XMLHTTP");
}


var url = "pasta/dados.php?userID="+ID;
acess.open("GET", url, true);
acess.onreadystatechange = function() {
if(acess.readyState == 1) {
document.getElementById('modal').innerHTML = 'Carregando ...';
}

if(acess.readyState == 4 && acess.status == 200) {

var answer = acess.responseText;

document.getElementById('modal').innerHTML = answer;

}
}
acess.send(null);

so in the.php data you put the user data , receives the ID makes the query and returns the data , and this page will be processed inside the element with ID "modal" or the ID you determined for your modal

//DADOS.PHP
<?php
$userID = $_GET['userID']??"";
if($userID != ""){
$cliente = $con->query("SELECT Username,Cpf,Email,Data FROM TABELA User WHERE UserID = $userID")


foreach ($cliente->buscarClientes() as $key => $value){
            echo "<tr>
                <td><input type='checkbox' value='$key'</td>
                <td>".$value->getNome()."</td>
                <td>".$value->getCpf()."</td>
                <td>".$value->getEmail()."</td>
                <td>".$value->getDataCadastro()."</td>
                <td>
                    <a href='#' data-toggle='modal' data-target='#modalCliente' data-clientmodal='$key'><i class='fa fa-edit' title='Editar'> </i></a>
                    <a href='#'> <i class='fa fa-trash' title='Excluir'> </i> </a>
                </td>
            </tr>";
          }
}
?>