1

Sou novo em PHP e me deparei com a seguinte situação:

Tenho um Modal, que carrega automaticamente os dados de uma consulta predefinida e está funcionando!

O que eu preciso implementar: Digitar uma variável e exibir o resultado nesta mesma Modal. Isto é possível? Se não, qual a melhor maneira de fazer?

Abaixo um print da tela atual:

inserir a descrição da imagem aqui

Js

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

Formulário que chama o Modal

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

PHP que carrega o Modal (Onde está minha dúvida)

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;
8
  • Talvez alguma destas o ajude: pt.stackoverflow.com/questions/130803/…, pt.stackoverflow.com/questions/130169/…
    – Miguel
    Commented 6/12/2017 às 18:27
  • Olá Miguel. Obrigado pela atenção. No meu caso o Modal já está inicializado e tabela vazia. A ideia é fazer a consulta com a variável na própria Modal. Commented 6/12/2017 às 20:10
  • Olá Marcelo, seja bem vindo! Eu não entendi a pergunta propriamente dita > Digitar uma variável e exibir o resultado nesta mesma Modal. Como Assim? Você poderia explicar melhor? Commented 7/12/2017 às 0:05
  • 1
    Ola Andrei. Obrigado pelas boas vindas. É isto mesmo. A imagem acima é o modal. Ao digitar a variável e clicar em [ Procurar ] o resultado seja exibido na table do mesmo Modal. Commented 7/12/2017 às 0:28
  • 1
    Oi Andrei. Queria muito agradecer sua atenção e dispor do seu tempo e conhecimento para me ajudar. Infelizmente ainda não consegui fazer funcionar...rs Estruturei do jeitinho que vc mostrou, mas não deu certo. Vou continuar tentando aqui. Valeu mesmo. Commented 7/12/2017 às 15:54

1 Resposta 1

1

Para resolver isso, você pode usar o AJAX com jquery. Mostrarei um exemplo abaixo de como funciona, porém você terá que molda-lo conforme sua necessidade pois não sei como você quer que seja exibido o conteúdo e também não tenho informações do seu banco.

Para usar essa técnica é necessário a biblioteca jquery

Vamos lá. Abaixo eu criei uma parte do seu modal para servir de exemplo, incluí ids e incluí uma div que estará com as informações que serão pesquisadas, veja:

<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>

Quando o usuário digitar a informação no input e clicar em procurar, ele chamará o seguinte 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>

Esse script será acionado após o click, irá resgatar a informação do input, vai enviar essa informação para o arquivo pesquisa.php que fará a pesquisa no banco e irá gerar o conteúdo:

<?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>';
    }

?>

Esse conteúdo gerado irá ser mostrado na div info.

Qualquer dúvida deixe nos comentários que responderei assim que puder.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .