Open modal window according to customer id

Asked

Viewed 776 times

0

In the view I do a foreach to display customers 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 the click on the details button opens the Modal with the complete customer information:

<!-- 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 turns out that Modal, is only displaying the first Customer from the list by clicking on the details button of any customer.

How do I get the details button of each customer in the list to display information from the selected customer? Thank you in advance!

php codeigniter bootstrap-3

  • It’s not because you’re accessing the $client[0] object instead of the correct index ?

  • Yes @Lucasbrogni but how do I make it right? Thanks

  • @Ramiro From what I understand, you want to show customer information that I clicked on "Details" in modal, in case that is, can create an ajax code that will be called whenever you click on the "Details" button and this ajax will return the data of the chosen customer and will write in modal.

  • @Piupz and how do you do it? rs ...I don’t have much intimacy with ajax

1 answer

3

Basically, you will request via AJAX by clicking on button of Details.

On your view, it will look 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 client code called 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 run every time btn-detalhes has the event of click, where 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 have configured in the block above, you will have to make the SQL query and make the HTML to return by Jquery. Only the HTML will look something like this: (Don’t forget to make the SQL query with the id that will pick up via $_GET['id'] Before I build HTML, here I’m just assembling HTML)

File called getClientes.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 that this gives to understand more or less how the consultation process will work, I recommend reading this guide, that teaches legal the concept of AJAX.

  • I didn’t get it that way. Maybe I wasn’t clear in the question.

Browser other questions tagged php codeigniter bootstrap-3

You are not signed in. Login or sign up in order to post.