Insert a query variable and display data in an already active Modal in PHP

Question

I am new in PHP and I came across the following situation:

I have a Modal, which automatically loads the data of a predefined query and is working!

What I need to implement: Enter a variable and display the result in this same Modal. Is this possible? If not, what better way to do?

Below a print of the current screen:

Js

$('#item-add').on('click', function(){
     $('body').modalmanager('loading');
     setTimeout(function(){
         $modal.load('?ng=ps/modal-list/', '', function(){
             $modal.modal();
         });
     }, 1000);
 });

Form that calls the Modal

<button type="button" class="btn btn-primary" id="item-add">
    <i class="fa fa-search"></i> {$_L['Add Product OR Service']}
</button>

PHP that loads the Modal (Where is my doubt)

case 'modal-list':

//**Consulta padrão atual**
$d = ORM::for_table('sys_items')->order_by_asc('name')->find_many();

//**Consulta com a váriavel (O que eu gostaria de implementar. Neste caso, deixaria de usar a consulta acima)**
//$name = 'caneta';        
//$d = ORM::for_table('sys_items')->where_like('name','%'.$name.'%')->find_many();  

echo '
<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
   <h3>'.$_L['Products n Services'].'</h3>
</div>


//**Aqui está o input para inserir a variável**

<div class="modal-body">
   <div class="input-group">
      <div class="input-group-addon">
         <span class="fa fa-search"></span>
      </div>
      <input type="text" name="name" class="form-control" placeholder="'.$_L['Search by Name'].'..."/>
      <div class="input-group-btn">
         <button class="btn btn-primary">'.$_L['Search'].'</button>
      </div>
   </div>


   //**Resultado abaixo**

   <table class="table table-striped" id="items_table">
      <thead>
         <tr>
            <th width="10%">#</th>
            <th width="10%">'.$_L['Item Number'].'</th>
            <th width="10%">'.$_L['NCM'].'</th>
            <th width="40%">'.$_L['Item Name'].'</th>
            <th width="10%">'.$_L['Price'].'</th>
         </tr>
      </thead>
      <tbody> 
';

foreach($d as $ds){
   $price = number_format($ds['sales_price'],2,$config['dec_point'],$config['thousands_sep']);
   echo '<tr>
   <td><input type="checkbox" class="si"></td>
   <td>'.$ds['item_number'].'</td>
   <td>'.$ds['ncm'].'</td> 
   <td>'.$ds['name'].'</td>
   <td class="price">'.$price.'</td>
   </tr>';
}
echo '
      </tbody>
   </table>
</div>

<div class="modal-footer">
   <button type="button" data-dismiss="modal" class="btn">'.$_L['Close'].'</button>
   <button class="btn btn-primary update">'.$_L['Select'].'</button>
</div>';

break;

Answer 1

To solve this, you can use the AJAX with jquery. I’ll show you an example below of how it works, but you’ll have to shape it as you need it because I don’t know how you want the content to be displayed and I also don’t have any information from your bank.

To use this technique you need the library jquery

Come on. Below I created a part of your modal to serve as an example, I included ids and included a div that will be with the information that will be searched, see:

<div id="info">
    <!-- As informações serão mostradas aqui -->
</div>

<div class="modal-body">
    <input id="pesquisa" type="text" name="name" class="form-control"/>
    <button  id="procurar" class="btn btn-primary">Procurar</button>
</div>

When the user enters the information on input and click on procurar, it will call the following script:

// biblioteca jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
// script que foi acionado pelo usuário
<script type="text/javascript">
$(document).ready(function () {
   $('#procurar').click(function () { // "#procurar" é o id do botão que o usuário apertou
     var pesquisa = $("#pesquisa"); // "#pesquisa" é o id do input que o usuário digitou
      $.ajax({
         type: 'POST',
         url: 'pesquisa.php', // esse é o arquivo que fará a pesquisa
         data: { value: pesquisa }, // aqui é lançado a variável da pesquisa
         success: function (result) {
            $('#info').html(result); // aqui ele altera a div que você quer que apareça a informação
         }
      });
   });
});
</script>

This script will be triggered after the click, will rescue the information from input, will send this information to the archive php search. which will search the database and generate the content:

<?php 

    // valor enviado pelo usuário através do ajax
    $pesquisa = $_POST['value'];
    // faz a pesquisa no banco a partir do valor que foi enviado
    $query = mysqli_query($conexao, "SELECT ... WHERE pesquisa LIKE '%$pesquisa%' ORDER BY ..."); 

    // Gera a informação que será inserida na div INFO do modal
    echo '<table class="table table-striped" id="items_table">
    <thead>
    <tr>';
    while($_L = mysqli_fetch_array($query)){
        echo '<th width="10%">'.$_L['Item Number'].'</th>';
        echo '<th width="10%">'.$_L['Item Name'].'</th>';
    }

?>

This generated content will be shown in div info.

Any questions leave in the comments that I will answer as soon as I can.