我想根据从codeigniter中的选择框中选择的数字显示图像

时间:2016-02-19 06:07:05

标签: javascript php jquery codeigniter

这里我想根据从选择框中选择的数字显示图像,我在选择框中的值是9,12,18,这是我的代码 我的视图页面看起来像这样......

<form action="<?php echo base_url();?>roxcontrol/numberdisplay" id="numberdisplay" method="post">
  <div class="col-md-4 col-sm-4 none-xs text-center">
    <div class="limiter hidden-xs">
      <label>Show</label>
      <select name="gallery" id="gallery">
        <option selected="selected" value="9">9</option>
        <option value="12">12</option>
        <option value="24">24</option>
        <option value="36">36</option>
      </select>
      per page
    </div>
  </div>
</form>
<script type="text/javascript">
  $(document).ready(function() {
    //alert();
    $("#numberdisplay").change(function() {
      var parent = $(this).val();
      //alert(parent);

      var url = '<?php echo base_url(); ?>roxcontrol/ajax_get_sub';
      $.post(url, {
          parent: parent
        }, function(data)

        {
          $('#gallery').html(data);
        });


    });

  });

</script>

我的控制页面如下所示

public function ajax_get_sub()
  {
    $gal_id=$this->input->post('parent');
    $data['galery']=$this->roxmodel->get_gallery_by_number($gal_id);
    $this->load->view('ajax_get_sub',$data);
  }

我的模型页面如下所示。

public function get_gallery_by_number($gal_id)
  {

      $this->db->order_by("gallery.id","desc");

  $query=$this->db->limit($gal_id)->get('gallery');
  return $query->result();
  }

这里我没有得到任何图像

1 个答案:

答案 0 :(得分:0)

在控制器中只需从ajax调用中获取Post值并尝试此

    public function ajax_get_sub() 
    {
    $gal_id=$this->input->post('gal_id');
    $this->db->order_by("id","desc");
    $query=$this->db->limit($gal_id)->get('gallery');
    $var="";
    foreach($query->result() as $row)
    {
    $var .= "<img src=".$row->img_url."/> </br>"; //your table image url(path)
    }
    echo $var;
    }

在视图文件

<div class="col-md-4 col-sm-4 none-xs text-center">
<div class="limiter hidden-xs">
  <label>Show :</label>
  <select name="gallery" id="gallery">
    <option selected="selected" value="9">9</option>
    <option value="12">12</option>
    <option value="24">24</option>
    <option value="36">36</option>
  </select>
  per page
</div>

<div id="img_display">

<script type="text/javascript">
$(document).ready(function() {
 $("#gallery").change(function() {
  var gal_id = $("#gallery").val();
  alert(gal_id);
  $.ajax({
    type: "post",
    url: base_url+'sample_controller/ajax_get_sub',
    cache: false,               
    data: {gal_id:gal_id},
    success: function(get_img){
        try{     
            $("#img_display").append(get_img);

    }catch(e) {     
        alert('Exception while request..'+JSON.stringify(e));
    }   

    },
    error: function(e){                     
        alert('Error while request..'+JSON.stringify(e));
    }
    });
  });
});

别忘了为图库选择选项赋值。 这是附加元素的方法之一。