Passing information to a Bootstrap Modal from Database

Question

Just a simple question to ask if there is someone available to assist me. Please take a look at this section on my index page:

            <?php foreach($galleries as $item) { ?>
        <div class="col-md-2">
            <p>Eagle Fruit <?= $item['gallery_name'] ?></p>
            <img src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" class="img-responsive">
            <a href="<?= base_url();?>view/<?= $item['gallery_name'];?>" data-toggle="modal" data-target="#gallery">View the Gallery</a>
        </div>
        <?php } ?>

My Controller is setup with the following function

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Site extends MX_Controller {

public function __construct()
{
    parent::__construct();
    $this->load->model('gallery/Gallery_m');
}

public function index($id = 'ID')
{
    $data['title'] = 'Welcome to Eagle Fruit Alliance (Pty) Ltd';
    $data['galleries'] = $this->Gallery_m->get_galleries();
    $data['gallery'] = $this->Gallery_m->view($id);
    $data['content'] = 'index_view';
    $this->load->view('templates/site/template',$data);
}}

Now when I click on the link i would like the gallery to open in a modal how would i achieve this? I have added a modal with the following code where am I going wrong:

Modal

            <!-- Modal -->
        <div class="modal fade" id="gallery" 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="myModalLabel"><?= $gallery['name'];?></h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- ./Model -->

yes but I would prefer to move it to it's own view if possible — RiaanV, Mar 31 '16 at 15:36
Okay so when it is in same view how would I make the information appear for each ID? — RiaanV, Mar 31 '16 at 15:37

score 0 · Answer 1 · edited May 23 '17 at 11:59

Because you are interacting with the user's click on an image, this isn't a PHP or HTML question. User interaction always involves javascript/jQuery.

AJAX is a two-part methodology. It is initiated in javascript, and sends data to a server-side PHP file that does something and returns a response, which is received/dealt with in javascript. See this SO post for more information on AJAX.

However, this question doesn't need to use AJAX either, because there is no additional data to fetch.

It's a bit difficult from your code to see exactly how to trigger the modal. Usually, we look for a commonality in the code, such as a class name, to use as the trigger. In your case, you could try:

$('p+img').click()

However, I recommend modifying your code like this:

<img class="mod_trig img-responsive" src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" >

Note: I moved the class to front of tag only to make it very visible in this answer. Keep it where it is in your code, if you wish.

Next, when a trigger is clicked, you use CSS selectors (jQuery uses CSS selectors, so learn them -- and Bootstrap uses jQuery, so learn jQuery) to get the href attribute of the <a> tag -- this is the direct link to the desired image, correct? You would only need to use AJAX if you didn't already have some information available to you on the page, but in this case you have all you need.

Use jQuery's .html() method to create an <img> tag inside the Bootstrap modal, replacing whatever was in that particular DIV. Here is a very simple example where we demonstrate exactly this procedure, but instead of putting it into the Bootstrap modal's framework we simply create the <img> tag inside a pre-existing DIV called #msg.

jsFiddle Demo

$('p+img').click(function(){
    var i = $(this).next('a').attr('href');
    //alert(i);
    $('#msg').html('<img src="'+i+'" class="msg" width="200" height="200" />');
});

#msg{position:absolute;top:30%;left:40%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
 <p>This is a test</p>
 <img src="http://placeimg.com/98/100/animals" />
 <a href="http://placeimg.com/98/100/animals">View the Image</a>
</div>
<div>
 <p>This is a test</p>
 <img src="http://placeimg.com/100/95/animals" />
 <a href="http://placeimg.com/100/95/animals">View the Image</a>
</div>
<div>
 <p>This is a test</p>
 <img src="http://placeimg.com/95/95/animals" />
 <a href="http://placeimg.com/95/95/animals">View the Image</a>
</div>
<div id="msg"></div>

*It's not a perfect example, because the placeholder image website does not serve the same image when requesting identical parameters, so you can uncomment the alert() line to see that each time you click an image you get different parameters injected into the #msg div -- you get the correct parameters for the <img> on which you clicked.

Now, all you need to do is to inject (via html() method) the newly-created <img> tag into the appropriate Bootstrap div instead of into the #msg div:

$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');

And trigger the modal to display:

jsFiddle Next Demo

$('.mod-trigger').click(function(){
   var i = $(this).next('a').attr('href');
    $('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
    $('#gallery-lightbox').modal('show');
});

Note how in this example I replaced the CSS selector with '.mod-trigger', and created a class on each image with that className

This new example shows you how to trigger the modal if a user clicks on the <a> tag:

jsFiddle Demo

Note that the <a> tag's default action is to navigate to another page. You don't want this, so the first thing you must do is suppress that default behavior:

$('.mod-atag').click(function(e){
   e.preventDefault();
   var i = $(this).attr('href');
    $('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
    $('#gallery-lightbox').modal('show');
});

Also note that I added a className to each <a> tag to make it easy to detect the click.

@RiaanV I added a new section to bottom of my answer. Skip right down to that final example. It detects both clicks on the `` tags or on the `` tags. The rest of the answer (above) is just a description of how it works. — cssyphus, Mar 31 '16 at 16:31

Passing information to a Bootstrap Modal from Database

1 Answers1