在一个模式AjAX编码器中显示不同的Gallery

Display diffrent Gallery in one modal AjAX Codeiginter

本文关键字:显示 Gallery 编码器 AjAX 模式 一个      更新时间:2024-04-19

嗨,我想知道如何为我单击的每个按钮显示不同的图库。这是我的视图代码:

        <div id="gallery-buttons">
        <div class="row">
            <div class="col-md-2 col-md-offset-3">
                <p>Eagle Fruit South Africa</p>
                <img src="<?= base_url() ?>assets/img/site/apple.png" class="img-responsive" id="apple"
                     alt="apple"/>
                <button type="button" onclick="saBtn()" class="btn btn-primary btn-sm" id="saBtn">View Gallery
                </button>
            </div>
            <div class="col-md-2">
                <p>Eagle Fruit Kenya</p>
                <img src="<?= base_url() ?>assets/img/site/avo.png" class="img-responsive" id="strawberry"
                     alt="avocado"/>
                <button type="button" onclick="kenyaBtn()" class="btn btn-primary btn-sm" id="kenyaBtn">View
                    Gallery
                </button>
            </div>
            <div class="col-md-2">
                <p>Eagle Fruit Egypt</p>
                <img src="<?= base_url() ?>assets/img/site/strawberry.png" id="eorange" class="img-responsive"
                     alt="strawberry"/>
                <button type="button" onclick="egyptBtn()" class="btn btn-primary btn-sm" id="egyptBtn">View
                    Gallery
                </button>
            </div>
        </div>
    </div>
</div>

因此,当我点击saBtn时,我希望从该库的数据库中提取图像,并以模式显示。我如何使用ajax 实现这一点

以下是迄今为止我的javascript函数

    /* Gallery Modals */
function saBtn(){
    $('#modalGallery').modal('show');
    $('.modal-title').text('Eagle Fruit South Africa Gallery'); // Set Title to Bootstrap modal title
}
function kenyaBtn(){
    $('#modalGallery').modal('show');
    $('.modal-title').text('Eagle Fruit Kenya Gallery'); // Set Title to Bootstrap modal title
}
function egyptBtn(){
    $('#modalGallery').modal('show');
    $('.modal-title').text('Eagle Fruit Egypt Gallery'); // Set Title to Bootstrap modal title
}

我的模型中有以下设置:

    function get_sa(){
    $this->db->select('*');
    $this->db->from('gallery');
    $this->db->join('gallery_images', 'gallery_images.gallery_id = gallery.name','left');
    $this->db->where('gallery.gallery_name' == 'South Africa');
    $query = $this->db->get();
    return $query->result('array');
}
function get_egypt(){
    $this->db->select('*');
    $this->db->from('gallery');
    $this->db->join('gallery_images', 'gallery_images.gallery_id = gallery.name','left');
    $this->db->where('gallery.gallery_name' == 'Egypt');
    $query = $this->db->get();
    return $query->result('array');
}
function get_kenya(){
    $this->db->select('*');
    $this->db->from('gallery');
    $this->db->join('gallery_images', 'gallery_images.gallery_id = gallery.name','left');
    $this->db->where('gallery.gallery_name' == 'Kenya');
    $query = $this->db->get();
    return $query->result('array');
}

那么现在我该如何将结果传递给模态并构建库呢?

使用AJAX从代码点火器获取结果