AJAX select filtering in CodeIgniter

Question

Я пытаюсь отфильтровать данные на своем экране, используя поле выбора. Я использую CodeIgniter, и я хочу отфильтровать его с помощью AJAX. Я уже тестирую код и смотрю на консоль, и сообщение AJAX возвращает результат. Проблема в том, что я не знаю, как отобразить результат в моем представлении. Я имею в виду, как я могу писать в success: function(){}?

Это мой AJAX код:

$(document).ready(function() { 
    $("#selectBerdasar").change(function() { 
     var key = $(this).val(); 
     console.log(key); 
     var postdata = {key: key}; 
     var url = '<?php echo site_url('produk/filter/GetFilterJson');?>'; 
     $.post(url, postdata, function(result) { 
      console.log(result); 
      if (result) { 
       var obj = JSON.parse(result); 
       $('col-item').empty(); 
       $.each(obj, function(key, line) { 

       }); 
      } else { 

      } 
     }); 
    }); 
}); 

Это мое мнение:

<div class="row"> 
    <div class="col-md-4 pull-right"> 
     <select class="form-control" id="selectBerdasar"> 
      <!-- <option>Produk Terbaru</option> 
      <option>Produk Terpopuler</option> --> 
      <option value="termahal">Harga Termahal</option> 
      <option value="termurah">Harga Termurah</option> 
      <option value="alfabet">Alfabet A-Z</option> 
     </select> 
    </div> 
</div> 
<div class="row"> 
    <?php foreach ($produk as $data) {?> 
     <div class="col-xs-6 col-sm-4 col-md-4"> 
      <div class="col-item"> 
       <a href="<?php echo base_url('produk/item/detail/' . $data['id_produk']);?>"> 
        <div class="photo"> 
         <img src="<?php echo base_url();?>asset/user/img/produk/<?php echo $data['gambar'];?>" class="img-responsive" alt="" /> 
        </div> 
        <div class="info"> 
         <div class="row"> 
          <div class="price col-md-12"> 
           <h5><?php echo $data['nama_produk'];?></h5> 
           <h5 class="price-text-color">Rp.<?=number_format($data['harga_produk'], 0, ',', '.')?></h5> 
          </div> 
         </div> 
         <div class="clearfix"></div> 
        </div> 
       </a> 
      </div> 
     </div> 
    <?php } ?> 
</div> 

Я просто не знаю, как показать результат, на мой взгляд.

Answer 1

Прежде всего вы должны, чтобы нумеровать свои вещи, как это:

<?php foreach ($produk as $KEY => $data) ?> 
    <div class="col-xs-6 col-sm-4 col-md-4"> 
     <div id="id-<?= $KEY ?>" class="col-item"> 

где $ KEY ваш идентификатор элемента Дейты (вы можете использовать $ данных [ «ключ»] вариант

Тогда использовать что-то вроде:

// ... 
var someHtml = ''; 
obj.forEach(function(elem, index) { 
    // remember to convert data type to string 
    someHtml = '<p>'+elem.some_data_to_display + '</p>'; 
    $('#id-'+elem.key).html(someHtml); 
}); 

// ...

Answer 2

Поскольку вы используете CodeIgniter, я бы использовать другой подход. Этот подход позволит вам изменить html отдельно в шаблоне в каталоге представлений.

В принципе, мы построим три метода функции. Первый метод products() заботится о начальной странице, он будет извлекать все продукты из модели, а затем отправлять продукты во второй метод buildProdHTML($prods) для создания данных в виде html, и, наконец, он отправит html в вид view.php, где выберите выпадающий список и jquery. JQuery/ajax будет использовать третий метод GetFilteredProducts(); этот метод будет извлекать отфильтрованные продукты из базы данных, строить HTML и отправлять их обратно в jquery.

Вот что я имею в виду:

Контроллер:

class Site extends CI_Controller { 

    public function GetFilteredProducts() { 
     $key = $this->input->post("key"); 
     $prods = $this->model_name->getProductsByKey($key);//Assuming you are using the function result(); 
     if ($prods) { 
      $html = $this->buildProdHTML($prods); 
      echo $html; 
     } 
    } 

    private function buildProdHTML($prods) { 
     $html = $this->load->view("templates/product", array("products" => $prods), TRUE); 
     return $html; 
    } 

    public function products() { 
     $prods = $this->model_name->getProducts(); //Assuming you are using the function result(); 
     if ($prods) { 
      $html = $this->buildProdHTML($prods); 
      $this->load->view("view", array('prod_html' => $html)); 
     } 
    } 
} 

просмотров/view.php

<div class="row"> 
    <div class="col-md-4 pull-right"> 
     <select class="form-control" id="selectBerdasar"> 
      <!-- <option>Produk Terbaru</option> 
      <option>Produk Terpopuler</option> --> 
      <option value="1">Harga Termahal</option> 
      <option value="2">Harga Termurah</option> 
      <option value="alfabet">Alfabet A-Z</option> 
     </select> 
    </div> 
</div> 
<div id="results" class="row"> 
    <?= $prod_html?> 
</div> 

<script> 
    $(document).ready(function() { 
     $("#selectBerdasar").change(function() { 
      var postdata = { key: $(this).val() }; 
      var url = '<?= site_url('site/GetFilteredProducts'); ?>'; 
      $.post(url, postdata, function(result) { 
       if (result) { 
        $('#results').html(result); 
       } else { 

       } 
      }); 
     }); 
    }); 
</script> 

просмотров/шаблоны/product.php

<?php foreach ($products as $data) { ?> 
    <div class="col-xs-6 col-sm-4 col-md-4"> 
     <div class="col-item"> 
      <a href="<?= base_url('produk/item/detail/' . $data->id_produk); ?>"> 
       <div class="photo"> 
        <img src="<?= base_url(); ?>asset/user/img/produk/<?= $data->gambar; ?>" class="img-responsive" alt="" /> 
       </div> 
       <div class="info"> 
        <div class="row"> 
         <div class="price col-md-12"> 
          <h5><?= $data->nama_produk; ?></h5> 
          <h5 class="price-text-color">Rp.<?= number_format($data->harga_produk, 0, ',', '.') ?></h5> 
         </div> 
        </div> 
        <div class="clearfix"></div> 
       </div> 
      </a> 
     </div> 
    </div> 
<?php } ?> 

Надежда это помогает. Дайте знать, если у вас появятся вопросы.