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

Question

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

Navigation

#1 by (1 votes)

2

I'm wanting that in modal, after clicking on the option view, it loads the information. However, it only loads ID 1 from the table, regardless of which table item I want to display. It always brings the same information. Below is the code for 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>

php twitter-bootstrap bootstrap-3 modal bootstrap-table

asked by anonymous 15.01.2016 / 13:05

1 answer

Redirect Cross-Domain AJAX Request in PHP Ajax does not work - send PHP data without refresh

score 1 · Answer 1

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

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

<?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 "template" in 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>

Ready. It is. Now do not forget to include Bootstrap and jQuery on your page.