选择年份后,我下拉了年份,我只想在选定的年份循环显示画廊

我想使用foreach loop在所选年份动态显示画廊。当前,URL数据的所有图像都以我想赋予foreach loop的ajax成功显示。 我正在按年份onChange()调用ajax请求,将年份传递给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>

控制器:

public function yearWiseGalleryPage()
  {
    $syear    = $this->input->post('Year');
    $Result   = $this->web_model->yearWise($syear);
    $formData = array('imgYear' => $Result);
    echo json_encode($formData);
  }

型号:

public function yearWise($syear){
    $this->db->select('*');
    $this->db->from('home_page_gallery');
    $this->db->where('year',$syear);
    return $this->db->get()->result_array();
  }

选择年份后,我下拉了年份,我只想在选定的年份循环显示画廊

yxsyg 回答:选择年份后,我下拉了年份,我只想在选定的年份循环显示画廊

尝试修改此类javascript代码,以在ajax调用完成后用图像填充gallery元素:

<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>
本文链接:https://www.f2er.com/3126248.html

大家都在问