I try to filter data in my view using select box. I'm using CodeIgniter and I want to filter it using AJAX. I already test the code and look at the console, and AJAX post returns a result. The problem is, I don't know how to display the result in my view. I mean, how am I suppose to write in success: function(){}?
This is my AJAX code:
$(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 {
}
});
});
});
This is my view:
<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>
I just don't know how to display the result in my view.
First of all you to should to numerate your items like this:
<?php foreach ($produk as $KEY => $data) ?>
<div class="col-xs-6 col-sm-4 col-md-4">
<div id="id-<?= $KEY ?>" class="col-item">
where $KEY is your id of data's element (you may use $data['key'] variant
Then use something like:
// ...
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);
});
// ...
Since you are using Codeigniter, I would use a different approach. This approach will let you modify the html separately in a template under the views directory.
Basically, we will build three function methods. The first method products() takes care of the initial page, it will retrieve all the products from the model, then send the products to the second method buildProdHTML($prods) to build the data as html, lastly it will send the html to the view view.php, where the select dropdown and jquery resides. The jquery/ajax will use the third method GetFilteredProducts(); this method will retrieve the filtered products from the database, build the HTML, and send it back to jquery.
Here's what I mean:
Controller:
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));
}
}
}
views/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>
views/templates/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 } ?>
Hope this helps. Let me know if you have any questions.