[英]I have year drop down after year select I want to show gallery in loop only selected year
我想使用foreach loop
按所选年份动态显示画廊。 目前,URL 数据的所有图像都存在于 ajax 成功我想给foreach loop
。 我按年份调用 ajax 请求onChange()
将年份传递给controller
然后model
以按选定年份获取数据。
但在我的 ajax 成功console.log(data);
它显示数据,但如何将我的图像 URL 提供给 foreach 循环。
看法:
<section id="gallery">
<div class="container-fluid pt-70 pb-0">
<form role="form" id="gallery_form" name="gallery_form" method="post" autocomplete="off">
<div class="row">
<div class="col-md-8 col-md-offset-2 ">
<div class="form-group" class="form-control">
<label><b style="color: #fff">Years</b></label>
<select class="form-control" name="year" id="year" style="color: #fff">
<option value="">Select Year</option>
<?php
foreach(range(2013, (int)date("Y")) as $year) {
echo "\t<option value='".$year."'>".$year."</option>\n\r";
}
?>
</select>
</div>
</div>
</div>
</form>
</div>
</section>
<div id="hide_gallery">
<section id="gallery" class="bg-lighter">
<div class="container-fluid pt-70 pb-0">
<div class="section-content">
<div class="row">
<div class="col-md-12">
<div class="gallery-lsit">
<?php foreach ():?>
<figure class="col-md-3">
<a class="img-popup pan" data-fancybox="gallery" href="#">
<img alt="picture" src="#" class="img-fluid">
</a>
<h3 class="text-center my-3"><?php echo ['']?></h3>
</figure>
<?php endforeach;?>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
$(document).ready(function() {
$("#hide_gallery").hide();
});
$('#year').on('change',function(){
var Year = $('#year').val();
$.ajax({
url :"<?php echo base_url();?>MainController/yearWiseGalleryPage",
type:"POST",
data:{
Year:Year,
},
dataType: "json",
success: function(data)
{
console.log(data);
$("#hide_gallery").show();
},
error:function(data)
{
alert("error message"+data);
},async:false,
});
});
</script>
Controller:
public function yearWiseGalleryPage()
{
$syear = $this->input->post('Year');
$Result = $this->web_model->yearWise($syear);
$formData = array('imgYear' => $Result);
echo json_encode($formData);
}
Model:
public function yearWise($syear){
$this->db->select('*');
$this->db->from('home_page_gallery');
$this->db->where('year',$syear);
return $this->db->get()->result_array();
}
在 ajax 调用完成后,尝试像这样修改 javascript 代码以使用图像填充画廊元素:
<script>
$(document).ready(function() {
$("#hide_gallery").hide();
});
$('#year').on('change',function(){
var Year = $('#year').val();
$.ajax({
url :"<?php echo base_url();?>MainController/yearWiseGalleryPage",
type:"POST",
data:{
Year:Year,
},
dataType: "json",
success: function(data)
{
console.log(data);
loadImages(data.imgYear);
$("#hide_gallery").show();
},
error:function(data)
{
alert("error message"+data);
},async:false,
});
});
function loadImages(data) {
let html = "";
$.each(data, function(k, v){
html += `<figure class="col-md-3">
<a class="img-popup pan" data-fancybox="gallery" href="${v.image_url}">
<img alt="picture" src="${v.image_url}" class="img-fluid">
</a>
<h3 class="text-center my-3">${v.title}</h3>
</figure>`
})
$('#hide_gallery .gallery-lsit').html(html);
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.