How to load the information inside the modal (bootstrap 3.3.6)?

Asked

Viewed 1,760 times

2

I’m hoping that in the modal, after clicking on the display option, it will load the information. However, it only loads the ID 1 of the table, regardless of which table item I want to view. It always brings the same information. Below is the code of how I’m doing.

<div class="container-fluid">
    <table class="table table-striped" data-toggle="table"
           data-search="true"
           data-show-refresh="true"
           data-show-columns="true">
        <thead>
            <tr>
                <th class="th-small" data-align="left" data-sortable="true">ID</th>
                <th data-align="left" data-sortable="true">Nome</th>
                <th class="th-small">Ações</th>
            </tr>
        </thead>
        <tbody>
            <?php
            foreach ($idade as $key => $v) {
                ?>
                <tr>

                    <td><?= $v->id ?></td>
                    <td><?= $v->titulo ?></td>
                    <td>
                        <form data-toggle="validator" method="POST" enctype="multipart/form-data">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                            <ul class="table-modal dropdown-menu">
                                <li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
                                <li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

    <!-- Modal VISUALIZAR -->
    <div class="modal fade" id="modal-select" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" 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="cadastroIdadelLabel">Visualizar - Idade</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
                        <fieldset>
                            <div class="form-group">
                                <div>
                                    <label>Idade:</label>
                                    <?= $v->titulo ?>

                                </div>
                                <div>
                                    <label>Código:</label>
                                    <?= $v->id ?>
                                </div>

                            </div>
                        </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>

                </div>
                </form>
            </div>
        </div>
    </div>

1 answer

2


I went through the same problem a few months ago. To solve the case, I did it this way.

  • I made a new page . php only for modal content.

    <?php include('config.php'); // Arquivo de acesso ao banco de dados
    
    if(isset($_GET['id_registro'])) // Recebe o ID do registro que deseja carregar
    {
        ?>
            <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">Modal Legal</h4>
            </div>
            <div class="modal-body">
                Conteúdo do modal. Coloque aqui todo o código que quer que apareça dentro do modal.
                Faça a pesquisa no banco de dados em php, etc...
            </div>
        <?php
    } php?>
    
  • I put the modal "mold" on the page where the modal will be used.

    <div id="idDivModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            </div>
        </div>
    </div>
    
  • Now the link that, when clicked, will open the modal with the database information (should be on the page where the modal will be used).

    <a href='#idDivModal' role='button' data-toggle='modal' data-load-remote='paginamodal.php?id_registro=".$id_registro."' data-remote-target='#idDivModal .modal-content' title='Título' aria-hidden='true' />
    
  • Finally, the Javascript code that will make it work (should be on the page where the modal will be used).

    <script>
     $('[data-load-remote]').on('click',function(e) {
        e.preventDefault();
        var $this = $(this);
        var remote = $this.data('load-remote');
        if(remote) {
            $($this.data('remote-target')).load(remote);
        }
     });
    </script>
    

Done. That’s it. Now don’t forget to include Bootstrap and jQuery on your page.

Browser other questions tagged

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