CODEWITHSUNDEEP
javascriptphpjquerycsstwitter-bootstrap
RepeaterCreeper
RepeaterCreeper

Reputation: 342

Contents from remote page to Bootstrap Modal

Okay so my problem is that when I do the following:

<a href="playerdetails.php?player=99VY9JR8" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here from "remote.php" file -->
        </div>
    </div>
</div>

That prints the playerdetails.php echo but for some reason it removes my bootstrap controls. Can someone tell me why it's doing it and how to fix it? I've already tried getting the default bootstrap modal template and still it shows the playerdetails.php echoes but it removes all my controls for the modal.

This is how it looks

Controls I'm looking for is these: These type.

Upvotes: 0

Views: 800

Answers (1)

reinder
reinder

Reputation: 2551

For these controls to function you need to provide the markup for them, bootstrap doesn't add them to modals automatically. If you can modify the output of playerdetails.php, simply add the markup there...e.g.

<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">Modal title</h4>
</div>

However Bootstrap has deprecated the remote option since v3.3.0 and removed it alltogether in Bootstrap 4. Instead they recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself

If you call jQuery.load yourself you can do something like this:

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <!-- load contents here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

define your button

<button class="btn btn-lg btn-primary btn-open-dialog">Launch Demo Modal</button>

and bind a jQuery click event to it to load your player

$('.btn-open-dialog').on('click', function(){
    $('#myModal .modal-body').load('playerdetails.php?player=99VY9JR8', function(){
        /* load finished, show dialog */
        $('#myModal').modal('show')
    });
});

Upvotes: 2

Related Questions