在一个模式AjAX编码器中显示不同的Gallery
Display diffrent Gallery in one modal AjAX Codeiginter
嗨,我想知道如何为我单击的每个按钮显示不同的图库。这是我的视图代码:
<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从代码点火器获取结果
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 在一个模式AjAX编码器中显示不同的Gallery
- 如何只在某些页面上显示NextGEN Gallery插件的js
- 如何在 Justified Gallery 中通过 API 显示 Flickr 图像
- jQuery Gallery可以在Firefox和Chrome上本地显示,但不能在线显示