Open modal window according to Customer id

Question

Open modal window according to Customer id

Navigation

#1 by (3 votes)

0

In the view I make a foreach to display the clients, as below:

<div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>      
                    <th>Nome</th>                                                                    
                    <th>Profissão</th>
                    <th>CPF</th>                                                                    
                    <th>Tel. Celular</th>
                    <th>E-mail</th>                                            
                    <th>Status</th>
                    </thead>
                    <tbody>                           
                        <?php foreach ($cliente as $cli) : ?>
                            <tr>                                                                
                                <td><?= $cli->nomecliente; ?></td>                                                                                                     
                                <td><?= $cli->profissao; ?></td>                                    
                                <td><?= $cli->cpf; ?></td>                                                                                            
                                <td><?= $cli->telcelular; ?></td> 
                                <td><?= $cli->email; ?></td>    
                                <td><?= $cli->status; ?></td>                            
                                <td>                                        
                                    <button type="button" title="Detalhes" href="<?= $cli->codcliente ?>" class="btn btn-info hidden-print" data-toggle="modal" data-target=".clientepf-modal-lg">
                                        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button></td>                            
                            </tr>                        
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>             
        </div>            
    </div>

And clicking the details button opens the Modal with the complete information of the client:

<!-- Modal View Cliente -->
<div class="modal fade clientepf-modal-lg"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" 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"><?= $cliente[0]->nomecliente; ?></h4>                
                <h4 class="modal-title">                                                          
                    <p><font  size="2" face="helvetica">Status: <strong><?php echo $cliente[0]->status; ?></strong></font></p>                                                                                                        
                </h4>
            </div>
            <div class="modal-body">                                    
                <input type="hidden" id="codcliente" name="codcliente" value="<?= $cliente[0]->codcliente; ?>">                                
                <div class="row">
                    <div class="col-md-3">                            
                        <p><font  size="2" face="helvetica">Nome: <strong><?php echo $cliente[0]->nomecliente; ?></strong></font></p>                                                                                                                                      
                    </div>
                    <div class="col-md-3">                            
                        <p><font  size="2" face="helvetica">Nacionalidade: <strong><?php echo $cliente[0]->nacionalidade; ?></strong></font></p>                                                                                                                                        
                    </div>
                    <div class="col-md-3" >                            
                        <p><font  size="2" face="helvetica">Estado Civil: <strong><?php echo $cliente[0]->estadocivil; ?></strong></font></p>                                                                                                                                                                        
                    </div>
                    <div class="col-md-3">                            
                        <p><font  size="2" face="helvetica">Profissão: <strong><?php echo $cliente[0]->profissao; ?></strong></font></p>                            
                    </div>
                </div>          
                <div class="row">
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">CPF: <strong><?php echo $cliente[0]->cpf; ?></strong></font></p>                                
                    </div>           
                    <div class="col-md-3">                            
                        <p><font  size="2" face="helvetica">RG: <strong><?php echo $cliente[0]->id; ?></strong></font></p>                                
                    </div>                    
                    <div class="col-md-3" >
                        <p><font  size="2" face="helvetica">NIS / PIS / PASEP: <strong><?php echo $cliente[0]->pis; ?></strong></font></p>                            
                    </div>
                    <div class="col-md-3">                            
                        <p><font  size="2" face="helvetica">CTPS: <strong><?php echo $cliente[0]->ctps; ?></strong></font></p>
                    </div>
                </div>                  
                <div class="row">
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Endereço: <strong><?php echo $cliente[0]->endereco; ?></strong></font></p>                                                                                                                                    
                    </div>                        
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Número: <strong><?php echo $cliente[0]->numero; ?></strong></font></p>                                                                                                                                                                            
                    </div>                
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Complemento: <strong><?php echo $cliente[0]->complemento; ?></strong></font></p>                                                                                                                                                                                                
                    </div>
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Bairro: <strong><?php echo $cliente[0]->bairro; ?></strong></font></p>                                                                                                                                                                                                            
                    </div>
                </div> 
                <div class="row">
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Cidade: <strong><?php echo $cliente[0]->cidade; ?></strong></font></p>                                                                                                                                                                                                                        
                    </div>                   
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Estado: <strong><?php echo $cliente[0]->estado; ?></strong></font></p>                                                                                                                                                                                                                                    
                    </div>
                    <div class="col-md-3" >
                        <p><font  size="2" face="helvetica">Cep: <strong><?php echo $cliente[0]->cep; ?></strong></font></p>                                                                                    
                    </div>   
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Email: <strong><?php echo $cliente[0]->email; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                            
                    </div>
                </div>
                <div class="row">                    
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Tel. Celular: <strong><?php echo $cliente[0]->telcelular; ?></strong></font></p>                                                                                                                                                                                                                                        
                    </div>                     
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Tel. Residencial: <strong><?php echo $cliente[0]->telresidencial; ?></strong></font></p>                                                                                                                                                                                                                                                                        
                    </div>          
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Tel. Comercial: <strong><?php echo $cliente[0]->telcomercial; ?></strong></font></p>                                                                                                                                                                                                                                            
                    </div>      
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Email Secundário: <strong><?php echo $cliente[0]->emailsecundario; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                        
                    </div>   
                </div>                          
                <div class="row">       
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Site: <strong><?php echo $cliente[0]->site; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                
                    </div>
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Rede Social: <strong><?php echo $cliente[0]->redesocial; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                    </div>
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Data de Nascimento: <strong><?php echo $cliente[0]->dtnascimento; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                    </div>  
                </div>
                <div class="row">    
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Pai: <strong><?php echo $cliente[0]->nomepai; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
                    </div>
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Mãe: <strong><?php echo $cliente[0]->nomemae; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                    </div>
                    <div class="col-md-3">
                        <p><font  size="2" face="helvetica">Observação: <strong><?php echo $cliente[0]->obs; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                    </div> 
                    <div class="col-md-3" >
                        <p><font  size="2" face="helvetica">Dt. Cadastro: <strong><?php echo $cliente[0]->dtcadastro; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                    </div>
                </div>                             
                <div class="modal-footer">
                    <button type="button"  title="Imprimir" class="btn btn-primary  hidden-print" onclick="myFunction()">
                        <span class="glyphicon glyphicon-print" aria-hidden="true"></span></button>                                                              
                    <button type="button" class="btn btn-default btn-sm hidden-print" data-dismiss="modal">Fechar</button>                                        
                </div>
            </div> <!-- modal-body -->        
        </div> <!-- modal-content -->
    </div> <!-- modal-dialog modal-lg -->
</div> <!-- modal fade clientepf-modal-lg -->

It happens that Modal is only displaying the first Customer in the list when clicking the details button of any client.

How do I make the detail button for each customer in the list display information for the selected customer? Thank you in advance!

php bootstrap-3 codeigniter

asked by anonymous 10.07.2018 / 16:09

1 answer

Output not expected in the file (infinity loop) CSV Python Rendering css when transforming view into string

score 3 · Answer 1

Basically, you will be requesting via AJAX by clicking on button tails.

In your view, it looks like this:

<div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>      
                    <th>Nome</th>                                                                    
                    <th>Profissão</th>
                    <th>CPF</th>                                                                    
                    <th>Tel. Celular</th>
                    <th>E-mail</th>                                            
                    <th>Status</th>
                    </thead>
                    <tbody>                           
                        <?php foreach ($cliente as $cli) : ?>
                            <tr>                                                                
                                <td><?= $cli->nomecliente; ?></td>                                                                                                     
                                <td><?= $cli->profissao; ?></td>                                    
                                <td><?= $cli->cpf; ?></td>                                                                                            
                                <td><?= $cli->telcelular; ?></td> 
                                <td><?= $cli->email; ?></td>    
                                <td><?= $cli->status; ?></td>                            
                                <td>                                        
                                    <button type="button" title="Detalhes" class="btn btn-info hidden-print btn-detalhes" data-codigo="<?= $cli->codcliente ?>" data-toggle="modal" data-target=".clientepf-modal-lg">
                                        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button></td>                            
                            </tr>                        
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>             
        </div>            
    </div>

    <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog newWidth">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Detalhes do Cliente</h4>
             </div>
             <div class="modal-body"></div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
             </div>
          </div>
       </div>
    </div>

Notice that on the button, I added a new class called btn-detalhes and a new attribute with the client code named data-codigo

In the same view file, you put this block at the end:

<script type="text/javascript">

$( ".btn-detalhes" ).click(function() {

    var id = $(this).data('codigo');
    $.get('http://localhost/getClientes.php?cliente='+id, function(html){
        $('#myModal .modal-body').html(html);
        $('#myModal').modal('show', {backdrop: 'static'});
    });

}); 

</script>

In this block above, it will be executed whenever btn-detalhes has the click event, where it will call a page on your site, in my case I am calling getClientes.php which will return the HTML to be displayed in the modal.

On the page you configured in the above block, you will have to do the SQL query and make the HTML to return to Jquery. Only the HTML will look something like this: (Do not forget to do the SQL query with the id that will catch via $_GET['id'] before assembling the HTML, here I am just mounting the HTML)

File named getClients.php:

       <input type="hidden" id="codcliente" name="codcliente" value="<?= $cliente->codcliente; ?>">                                
        <div class="row">
            <div class="col-md-3">                            
                <p><font  size="2" face="helvetica">Nome: <strong><?php echo $cliente->nomecliente; ?></strong></font></p>                                                                                                                                      
            </div>
            <div class="col-md-3">                            
                <p><font  size="2" face="helvetica">Nacionalidade: <strong><?php echo $cliente->nacionalidade; ?></strong></font></p>                                                                                                                                        
            </div>
            <div class="col-md-3" >                            
                <p><font  size="2" face="helvetica">Estado Civil: <strong><?php echo $cliente->estadocivil; ?></strong></font></p>                                                                                                                                                                        
            </div>
            <div class="col-md-3">                            
                <p><font  size="2" face="helvetica">Profissão: <strong><?php echo $cliente->profissao; ?></strong></font></p>                            
            </div>
        </div>          
        <div class="row">
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">CPF: <strong><?php echo $cliente->cpf; ?></strong></font></p>                                
            </div>           
            <div class="col-md-3">                            
                <p><font  size="2" face="helvetica">RG: <strong><?php echo $cliente->id; ?></strong></font></p>                                
            </div>                    
            <div class="col-md-3" >
                <p><font  size="2" face="helvetica">NIS / PIS / PASEP: <strong><?php echo $cliente->pis; ?></strong></font></p>                            
            </div>
            <div class="col-md-3">                            
                <p><font  size="2" face="helvetica">CTPS: <strong><?php echo $cliente->ctps; ?></strong></font></p>
            </div>
        </div>                  
        <div class="row">
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Endereço: <strong><?php echo $cliente->endereco; ?></strong></font></p>                                                                                                                                    
            </div>                        
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Número: <strong><?php echo $cliente->numero; ?></strong></font></p>                                                                                                                                                                            
            </div>                
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Complemento: <strong><?php echo $cliente->complemento; ?></strong></font></p>                                                                                                                                                                                                
            </div>
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Bairro: <strong><?php echo $cliente->bairro; ?></strong></font></p>                                                                                                                                                                                                            
            </div>
        </div> 
        <div class="row">
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Cidade: <strong><?php echo $cliente->cidade; ?></strong></font></p>                                                                                                                                                                                                                        
            </div>                   
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Estado: <strong><?php echo $cliente->estado; ?></strong></font></p>                                                                                                                                                                                                                                    
            </div>
            <div class="col-md-3" >
                <p><font  size="2" face="helvetica">Cep: <strong><?php echo $cliente->cep; ?></strong></font></p>                                                                                    
            </div>   
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Email: <strong><?php echo $cliente->email; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                            
            </div>
        </div>
        <div class="row">                    
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Tel. Celular: <strong><?php echo $cliente->telcelular; ?></strong></font></p>                                                                                                                                                                                                                                        
            </div>                     
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Tel. Residencial: <strong><?php echo $cliente->telresidencial; ?></strong></font></p>                                                                                                                                                                                                                                                                        
            </div>          
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Tel. Comercial: <strong><?php echo $cliente->telcomercial; ?></strong></font></p>                                                                                                                                                                                                                                            
            </div>      
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Email Secundário: <strong><?php echo $cliente->emailsecundario; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                        
            </div>   
        </div>                          
        <div class="row">       
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Site: <strong><?php echo $cliente->site; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                
            </div>
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Rede Social: <strong><?php echo $cliente->redesocial; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            </div>
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Data de Nascimento: <strong><?php echo $cliente->dtnascimento; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
            </div>  
        </div>
        <div class="row">    
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Pai: <strong><?php echo $cliente->nomepai; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
            </div>
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Mãe: <strong><?php echo $cliente->nomemae; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
            </div>
            <div class="col-md-3">
                <p><font  size="2" face="helvetica">Observação: <strong><?php echo $cliente->obs; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
            </div> 
            <div class="col-md-3" >
                <p><font  size="2" face="helvetica">Dt. Cadastro: <strong><?php echo $cliente->dtcadastro; ?></strong></font></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
            </div>

I hope this helps you to understand more or less how the query process will work, I recommend reading this guide , which teaches the legal concept of AJAX.