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

Question

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

Navigation

#1 by (0 votes)

1

I'm new to 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: Type a variable and display the result in the same Modal . Is this possible? If not, what is the best way to do it?

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);});

FormcallingtheModal

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

PHP loading Modal (Where's my question)

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;

php javascript html modal

asked by anonymous 06.12.2017 / 19:18

1 answer

Sequelize and Google Cloud Storage Visual Studio 2017 only recognizes new code if restarted

score 0 · Answer 1

To resolve this, you can use AJAX with jquery . I'll show you an example below of how it works, but you'll have to mold it according to your need because I do not know how you want the content to appear and I also do not have information from your bank.

To use this technique you need the jquery library

Come on. Below I have created a part of your modal to serve as an example, include ids and include 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 types the information in input and clicks procurar , he will call the following script:

// biblioteca jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>//scriptquefoiacionadopelousuário<scripttype="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, it will retrieve the input information, it will send this information to the search.php file that will search the database and generate the content:

/ p>

<?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 the info div.

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