Show Query in Ventana Modal

INQUIRY:

The query should be filtered by user:

SELECT hist_id, pay_id, user_uid, pay_amount, pay_totalint, pay_totalpay, pay_amountrest, hist_date
  FROM payments_history WHERE user_uid='".$_POST['id']."' 
 ORDER BY hist_date DESC

AJAX:

The dataType should be "html".

  

The type of data expected from the server. Default: Intelligent Guess   (xml, json, script, text, html).

Source: link

fetch_data2 () I still do not know what it does, I delete it and in its place I inject the html in the modal window (I will invent the id of the modal window because you do not indicate anything about it):

$(document).on('click', '.btn_info', function(){

var id= $(this).data("id8");

    $.ajax({
        url:"clientsm_ajax.php",
        method:"GET",
        data:{id:id},
        dataType:"html",
        success:function(data){
            $('#mi_modal').html(data);
        }
    });
});

link

(edit) As you do not show what clientsm.php does, I assume that it generates the valid html of a <table> with the payment data of a user.

The problem begins when calling from ajax to the same script that generates the page, avoid this because it only complicates the code.

I have separated the initial script in two, cutting between the 155 and 254 lines would be:

CLIENTSM.PHP

<?php
session_start();

include_once 'header.php';
include_once 'includes/dbc.inc.php';

/* Para no escribir tantos ECHO se crea la variable OUPUT */
$output = '';

$username = '';

/* Cargo mi tabla con los valores de la tabla Clientes */
$sql = "SELECT * FROM clients";

/* almaceno el resultado de mi query */
$result = mysqli_query($conn, $sql);

$output .= '
        <br><br><br><br><br>
        <h2>Clientes</h2><br>

   /*Fly este formulario lo agregue porque pensaba que si la ancla 
   <a> donde presiono mi INFO no estaba dentro de un formulario no 
    recibiria la instruccion*/
      <form action="clientsm.php" method="GET">

       <div class="container table-responsive" >                    
          <table class="table table-hover">
              <thead>
                    <tr>  
                       <th >Id</th>  
                       <th >First Name</th>  
                       <th >Last Name</th>
                       <th >Username</th>  
                       <th >Password</th>  
                       <th >Phone Number</th>
                       <th >Email</th>   

                    </tr>
              </thead>';

/* Si el resultado en numero de registros de mi query SQL  
  es mayor a 0 significa que hay datos a cargar en la
  tabla */
if (mysqli_num_rows($result) > 0) {
    /* Por cada registro de mi tabla Clientes que me los vaya 
      agregando a la tabla y los almaceno en la variable ROW */
    while ($row = mysqli_fetch_array($result)) {

        $output .= '
              <tbody>

                    <tr>
                        <td>' . $row["user_id"] . '</td> 

                        <td class="user_first" data- 
                    id1="' . $row["user_id"] . '" 
                   contenteditable>' . $row["user_first"] . '</td>

                        <td class="user_last" data- 
                    id2="' . $row["user_id"] . '" 
                    contenteditable>' . $row["user_last"] . '</td>

                        <td class="user_uid" data- 
                    id3="' . $row["user_id"] . '" 
                    contenteditable>' . $row["user_uid"] . '</td>

                        <td class="user_pwd" data- 
                     id4="' . $row["user_id"] . '" 
                     contenteditable>' . $row["user_pwd"] . '</td>

                        <td class="user_phone" data- 
                       id5="' . $row["user_id"] . '" 
                       contenteditable>' . $row["user_phone"] . '</td>

                        <td class="user_email" data- 
                        id6="' . $row["user_id"] . '" 
                         contenteditable>' . $row["user_email"] . '</td>

                        <td>
                        <button type="button" name="btn_delete2" 
                        id="btn_delete2" data- 
                         id7="' . $row["user_id"] . '" class="btn btn-xs 
                         btn-danger btn_delete2">DELETE
                        </button>
                        </td>

                        <td>
                        <a data-toggle="modal" data- 
                      id8="' . $row["user_id"] . '" class="btn_info" data- 
                      target="#paymentshist" id="trigger-btn">INFO
                        </a>
                        </td>

                    </tr>
                    </tbody>';
    }

    $output .= '  
                    <tr>  
                        <td></td>

                        <td id="user_first" contenteditable></td>  
                        <td id="user_last" contenteditable></td>
                        <td id="user_uid" contenteditable></td>  
                        <td id="user_pwd" contenteditable></td>
                        <td id="user_phone" contenteditable></td>  
                        <td id="user_email" contenteditable></td>

                        <td>
                        <button type="button" name="btn_add2" 
                        id="btn_add2" class="btn btn-xs btn- 
                        success">ADD
                        </button>
                        </td>  
                    </tr>';
}
/* Si el numero de registros de mi query SQL es 
  menor o igual a 0 entonces me muestra lo
  siguiente */ else {

    $output .= '
                      <tr>  
                          <td colspan="4">NO hay registros para 
                         Mostrar
                          </td>  
                      </tr>';
}
$output .= '
                </table>  
                 </div>
                 </form>';

echo $output;
?>

<div class="container">
    <div class="row">


        <div class="modal fade modal-fullscreen" 
             id="paymentshist" tabindex="-1" role="dialog" aria- 
             labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data- 
                                dismiss="modal" aria-label="Close"><span aria- 
                                 hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Historial 
                            de Pagos</h4>
                    </div>
                    <div class="modal-body" id="mi_modal">
                        Hola!!! soy una ventana flotante, aqui puedo poner cualquier
                        texto, porque estoy oculta, si cuando me vuelva visible
                        puedes leer este texto significará que el ajax a fallado.

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" 
                                data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <?php
        include_once 'footer.php';
        ?>

As you can see the floating window the empty gender (well, almost empty) because it does not make sense to enter data, it will depend on what the user presses.

  

I added id="mi_modal" to the body div of the modal because that is where   will insert the response of the ajax.

The new file will take the part that generates the results table, which will be inserted in the modal window, that and only that, will be the file that is called from the ajax and must respond to the parameters sent (in this case only id , by the way, I modified the previous javascript to make it match with this file), it would be:

CLIENTSM_AJAX.php

<?php
session_start();
include_once 'includes/dbc.inc.php';
/* Para no escribir tantos ECHO se crea la variable 
  OUPUT */
$output = '';



$querypaymentshist = "SELECT hist_id, pay_id, 
                  user_uid, pay_amount, pay_totalint, pay_totalpay, 
                   pay_amountrest, hist_date FROM payments_history 
                   WHERE user_uid='" . intval($_GET['id']) . "' ORDER BY hist_date 
                    DESC";

/* almaceno el resultado de mi query */
$resultpamentshist = mysqli_query($conn, $querypaymentshist);


$output .= '
                   <br>

                   <div class="container table-responsive">                    
                   <table class="table table-hover">
                   <thead>
                    <tr>  
                       <th >Id</th>  
                       <th >Pay_Id</th>  
                       <th >Usuario</th>
                       <th >Ingreso</th>  
                       <th >Intereses</th>  
                       <th >Abonado</th>
                       <th >Capital</th>
                       <th >Fecha</th>  

                    </tr>
                    </thead>';

/* Si el resultado en numero de registros de mi query 
  querypaymentshist  es mayor a 0 significa que hay
  datos a cargar en la tabla */
if (mysqli_num_rows($resultpamentshist) > 0) {
    /* Por cada registro de mi tabla Payments que me los 
      vaya agregando a la tabla y los almaceno en la
      variable ROWph */
    while ($rowph = mysqli_fetch_array($resultpamentshist)) {

        $output .= '
              <tbody>

                    <tr>
                        <td>' . $rowph["hist_id"] . '</td> 

                        <td class="pay_id" data- 
                        id1="' . $rowph["hist_id"] . '" 
                        contenteditable>' . $rowph["pay_id"] . '</td>

                        <td class="user_uid" data- 
                        id2="' . $rowph["hist_id"] . '" 
                         contenteditable>' . $rowph["user_uid"] . '</td>

                        <td class="pay_amount" data- 
                        id3="' . $rowph["hist_id"] . '" 
                        contenteditable>' . $rowph["pay_amount"] . '</td>

                        <td class="pay_totalint" data- 
                         id4="' . $rowph["hist_id"] . '" 
                       contenteditable>' . $rowph["pay_totalint"] . '</td>

                        <td class="pay_totalpay" data- 
                         id5="' . $rowph["hist_id"] . '" 
                      contenteditable>' . $rowph["pay_totalpay"] . '</td>

                        <td class="pay_amountrest" data- 
                       id6="' . $rowph["hist_id"] . '" 
                     contenteditable>' . $rowph["pay_amountrest"] . '</td>

                        <td class="hist_date" data- 
                      id7="' . $rowph["hist_id"] . '" 
                     contenteditable>' . $rowph["hist_date"] . '</td>

                    </tr>
                   </tbody>';
    }
}
/* Si el numero de registros de mi query 
  resultpamentshist es menor o igual a 0 entonces me
  muestra lo siguiente */ else {

    $output .= '
                      <tr>  
                          <td colspan="4">NO hay registros para 
                          Mostrar
                          </td>  
                      </tr>';
}
$output .= '
                     </table>  
                     </div>';

echo $output;
?>

The script must be fully functional, it must include what is necessary for the connection to the database, as well as log in if you are going to use some variable $_SESSION .

The query is modified with respect to the original, as I already mentioned, to search by filtering by the client's id, which is the parameter sent to me by the ajax.

As you can see you had everything already almost functional, just missing a couple of details.

To facilitate debugging and maintain the standard, you should make the information requests by GET , so you can test the ajax directly in the browser and verify its operation.

It would be better if you split into 3 different files and make the table with JQuery ie pagina.php , script.js and consulta.php

    $(document).on('click', '.btn_info', function(){
    var id= $(this).data("id8");
        $.ajax({
            url:"clientsm.php",
            method:"POST",
            data:{id:id},
            dataType:"json",
            success:function(data){
                var t = $('#tableModal').DataTable(); 
                t.row.add( [
                        data[0],
                        data[1],
                        data[2],
                        data[3],
                        data[4]'
                    ] ).draw( false );
            }
        });
});

//clientsm.php
$id=$_POST["id"]
//db_conn=> configuracion de DB
$sql = "SELECT * from ***** WHERE id";								
$db_conn = conecta();
$result = $db_conn->query ($sql) or die ("Fallo en la consulta");	
$d = array();
while ($r = $result->fetch_assoc()) {
  $d[]=$r;
}
print( json_encode($d));

<table id="table1">
  <!-- todo de la primera tabla -->
</table>

<div id="modal">
  <table id="tableModal">
    <!-- todo de la llenado desde ajax -->
  </table>
</div>

<!-- Puedes no usar el script de DATATABLE , Pero la idea es esa  -->

The datetype that receives the ajax must be json , if you do not use DATATABLE and use another format for your table the idea is the same, data from ajax does not run PHP Me faltó el FOR para recorrer el JSON