Switch varialvel to modal

Asked

Viewed 746 times

6

I have a page with a table whose code field is a link that opens a modal. I need that when opening the modal, show another table, only with the data according to the value of the field (code) clicked. How do I receive within the modal the value of the chosen field ?

Someone knows how to do it ?

Code:

<table class="table table-bordered table-hover center-text" name="carrtab" id="carrtab"
       style="background-color: #ffffff;">
    <thead align="center">
    <tr class="danger">
        <th class="text-center">Data</th>
        <th class="text-center">Tipo</th>
        <th class="text-center">Descrição</th>
        <th class="text-center">Cliente</th>
        <th class="text-center">Usuario</th>
        <th class="text-center">Link</th>
    </tr>
    </thead>
    <tbody>
    <?

    $tipoentradalog = post('tipoentradalog');
    $usuario = post('usuario');
    $codcliente = post('codcliente');
    $datade = post('datade');
    $dataate = post('dataate');
    $codigo = post('codigo');

        $sql = "select
                    l.datacriacao,
                    tl.nome as tipo,
                    l.descricao,
                    cli.nome as cliente,
                    us.nome as usuario,
                    l.codigo
                    from log l
                    inner join cliente cli on cli.codcliente=l.codcliente
                    inner join usuario us on us.codusuario=l.codusuario
                    inner join empresa emp on emp.codempresa=l.codempresa
                    inner join tipoentradalog tl on tl.codtipoentradalog=l.codtipoentradalog
                    where cli.codempresa=$codempresa
                    and l.datacriacao between '$datade%' and '$dataate%' ";
        if($usuario != ""){
            $sql .= " and us.codusuario=$usuario ";
        }
        if($codcliente != "") {
            $sql .= " and cli.codcliente=$codcliente ";
        }
        if($tipoentradalog != "") {
            $sql .= " and tl.codtipoentradalog=$tipoentradalog ";
        }

        $rst = my_query($connR, $sql);

            foreach($rst as &$row){
                ?>
                <tr>
                    <td align="center"><?=normalDate($row['datacriacao']);?></td>
                    <td align="center"><?=$row['tipo']?></td>
                    <td align="center"><?=$row['descricao']?></td>
                    <td align="center"><?=$row['cliente']?></td>
                    <td align="center"><?=$row['usuario']?></td>
                    <td align="center"><a class="link-target" role="link" data-toggle="modal" href="#modalContainer" aria-expanded="false" aria-controls="modalContainer" style="text-decoration: none; color: black;"><?=$row['codigo']?></a></td>
                </tr>
            <?
                if($row['codigo'] != "")
                {
                    global $codigo;
                    $codigo = $row['codigo'];
                }
            }?>
            </tbody>
        </table>
<div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="myModalLabel">Extrato Rodízio</h3>
                    </div>
                    <div class="modal-body">
                        <h4>Chat</h4>
                        <table name="tabrod" id="tabrod" class="table table-bordered table-hover center-text" style="background-color: #ffffff;">
                            <thead align="center">
                            <tr class="danger">
                                <th class="text-center">Data</th>
                                <th class="text-center">Cliente</th>
                                <th class="text-center">Usuario</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?
                            $sql = "select cli.codcliente, cli.nome, emp.nome as empresa from cliente cli
                                    inner join empresa emp on emp.codempresa=cli.codempresa
                                    where cli.codcliente=$codigo;";
                            $rst = my_query($connR, $sql);

                            foreach ($rst as $row) {
                                ?>
                                <tr>
                                    <td align="center"><?= $row['codcliente']; ?></td>
                                    <td align="center"><?= $row['nome'] ?></td>
                                    <td align="center"><?= $row['empresa'] ?></td>
                                </tr>
                            <?
                            }?>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
                </div>

            </div>
php javascript

  • To do this the content of your Modal must be external, and you must do something similar to this answer.

  • Hi Kadu, thanks for your help. So... you didn’t roll in mine. I was a little confused because I did not identify in the code a value corresponding to 'Idcodprodutos' in the example you showed me. Is there any way you could just explain to me what I should do? Thank you.

  • In your case I believe it is the variable $row['codigo'], but your code is a bit confused, I don’t think you have a good logic. And all the code that is inside the modal-content should be a separate page, which should be sent the variable $row['codigo'] to load your SQL with the data you want.

  • I understood this part of a separate page for modal... I’ll try again. Thank you

  • Donna added an answer, read it over and try to do as I did. Since I haven’t tried it, there may be some errors, do some tests. Anything leave a comment on the reply. Another thing I noticed in your code, is that you use the short tag <?, just be careful, because some servers have them disabled, always give preference to <?php.

1 answer

4


On your display page do so:

<table class="table table-bordered table-hover center-text" name="carrtab" id="carrtab"
   style="background-color: #ffffff;">
<thead align="center">
<tr class="danger">
    <th class="text-center">Data</th>
    <th class="text-center">Tipo</th>
    <th class="text-center">Descrição</th>
    <th class="text-center">Cliente</th>
    <th class="text-center">Usuario</th>
    <th class="text-center">Link</th>
</tr>
</thead>
<tbody>
<?

    $tipoentradalog = post('tipoentradalog');
    $usuario = post('usuario');
    $codcliente = post('codcliente');
    $datade = post('datade');
    $dataate = post('dataate');
    $codigo = post('codigo');

    $sql = "SELECT
                l.datacriacao,
                tl.nome as tipo,
                l.descricao,
                cli.nome as cliente,
                us.nome as usuario,
                l.codigo
            FROM log l
                INNER JOIN cliente cli ON cli.codcliente=l.codcliente
                INNER JOIN usuario us ON us.codusuario=l.codusuario
                INNER JOIN empresa emp ON emp.codempresa=l.codempresa
                INNER JOIN tipoentradalog tl ON tl.codtipoentradalog=l.codtipoentradalog
            WHERE 
                cli.codempresa=$codempresa AND 
                l.datacriacao BETWEEN '$datade%' AND '$dataate%' ";
    if(!empty($usuario)
        $sql .= " and us.codusuario=$usuario ";

    if(!empty($codcliente))
        $sql .= " and cli.codcliente=$codcliente ";

    if(!empty($tipoentradalog))
        $sql .= " and tl.codtipoentradalog=$tipoentradalog ";


    $rst = my_query($connR, $sql);

        foreach($rst as &$row){
            ?>
            <tr>
                <td align="center"><?=normalDate($row['datacriacao']);?></td>
                <td align="center"><?=$row['tipo']?></td>
                <td align="center"><?=$row['descricao']?></td>
                <td align="center"><?=$row['cliente']?></td>
                <td align="center"><?=$row['usuario']?></td>
                <td align="center">
                    <a href="loadmodal.php?codigo=<?=$row['codigo']?>" data-toggle="meumodal" data-target="#modalContainer" class="link-target" role="link" aria-expanded="false" aria-controls="modalContainer" style="text-decoration: none; color: black;"><?=$row['codigo']?></a>
                </td>
            </tr>
    <?php
            if(!empty($row['codigo'])) {
                global $codigo;
                $codigo = $row['codigo'];
            }
        }
    ?>
    </tbody>
</table>

<div class="modal fade" id="modalContainer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog modal-lg">
       <div class="modal-content"></div>
   </div>
</div>

<script type="text/javascript">
$(document).on('click', "[data-toggle='meumodal']", function(event){
  event.preventDefault();
  target = $(this).attr("data-target");
  content = $(this).attr("href");
  $(target+".modal .modal-content").load(content,function(){
     $(target).modal('show');
  });
});
</script>

Obs.: Note the table row, where the link is mounted, some changes were made there. A change worth noting is the attribute href that now has the name of the page that will be created with the code just below (the target was for the attribute data-target). Also added a script drawn of this answer.

Now create a PHP file that has connection to your database, as a completely independent page. And put the following code in it:

<div class="modal-header">
    <h3 class="modal-title" id="myModalLabel">Extrato Rodízio</h3>
</div>
<div class="modal-body">
    <h4>Chat</h4>
    <?php
        if (!empty($_GET['codigo'])){
            $codigo = filter_var($codigo);
    ?>
    <table name="tabrod" id="tabrod" class="table table-bordered table-hover center-text" style="background-color: #ffffff;">
        <thead align="center">
        <tr class="danger">
            <th class="text-center">Data</th>
            <th class="text-center">Cliente</th>
            <th class="text-center">Usuario</th>
        </tr>
        </thead>
        <tbody>
        <?php

            $sql = "SELECT 
                      cli.codcliente, cli.nome, emp.nome as empresa 
                    FROM cliente cli
                       INNER JOIN empresa emp ON emp.codempresa=cli.codempresa
                    WHERE cli.codcliente=$codigo;";
            $rst = my_query($connR, $sql);

            foreach ($rst as $row) {
        ?>
            <tr>
                <td align="center"><?= $row['codcliente']; ?></td>
                <td align="center"><?= $row['nome'] ?></td>
                <td align="center"><?= $row['empresa'] ?></td>
            </tr>
        <?php
            }
        ?>
        </tbody>
    </table>
    <?php 
        } else {
    ?>
        <div class="alert alert-danger" role="alert">
            <p>Oops! O cliente não foi encontrado.</p>
        </div>
    <?php 
        }
    ?>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>

  • Kadu... the link code passes the value to the modal url but does not open anything. I put a console.log in the js function to know and saw that the page returned only #modalContainer, but in the code there is no div with this id. What should I date-target ? Thank you

  • Hi @Donnathegirl, sorry the modal marking was wrong. I already corrected. O data-target is ID modal.

  • Yay! It worked! Thanks for the help @Kaduamaral. Hugs.

Browser other questions tagged php javascript

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