Bootstrap 3 remote content in modal again

Question

I tried a lot of solutions found here to accomplish my goal, but unfortunately none of these seems to work for what I want.

I've got a list of (let's say) users, loaded from a MySQL database by a loop. Now I want a button for every user's name that opens a modal with additional info.

The list is something like:

<li><a class='btn btn-default' data-toggle='modal' data-target='myModal' href='user.php?userid=1'>User 1</a></li>
<li><a class='btn btn-default' data-toggle='modal' data-target='myModal' href='user.php?userid=2'>User 2</a></li>

Inside the modal, there should run another MySQL query to get more data from the DB depending on the passed variable (i.e. userid=1).

Where do I put now the code for #myModal? If I place it completely (or partially) in user.php, the modal backgrounds shows up, but no modal. If I place it somewhere in the file with my links, it doesn't load the remote file. Also, I can't change the modal title dynamically (which should read i.e. "User 1").

And then there is the problem with reloading other user data when clicking on a link again.

Can anyone provide me with some hints on how to do this?

NextKalle NextKalle · Accepted Answer · 2013-11-08T09:12:51

Put the Modal div with id myModal on the same page where your list located is like this:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

Then in to the remote user.php insert rest of the modal dialog. Like this:

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Data review</h4>

    </div>
    <div class="modal-body">
    <! -- CONTENT HERE -->

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

    </div>
</div>
<!-- /.modal-content -->

Finally to make the multiple modals to work add the following script:

 <script>
$("div[id$='Modal']").on('hidden.bs.modal',
    function () {

        $(this).removeData('bs.modal');
    }
);
</script>

That should do it. Changing the title should be trivial now.

Bootstrap 3 remote content in modal again

1 Answers