Bootstrap Modal data insertion with PHP OO

Question

Bootstrap Modal data insertion with PHP OO

I am developing a client registration screen with PHP OO but due to my inexperience I have encountered difficulties in listing client data within a Bootstrap Modal.

First, I have this list of client objects where I present only some basic data of the registered clients: 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>";
              }
            ?>

Obs: buscarClientes() returns an array of client objects where the index is the ID of the client.

Modal:

Bootstrap Modal jQuery code:

   <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 on the pencil icon The modal opens with all the data of the respective client to be able to edit them, if possible reusing the object that is already created. I Tried Using 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 this?

0

php jquery modal crud orientação-a-objetos

Author: R. Zanel, 2016-08-05

Source

1 answers

score 1 · Accepted Answer

A hint of how I would do if understand will manage to do it your way , I would create a new folder with a php file - > " data.php " and clicking 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 data.php you put the user data, get 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>";
          }
}
?>