[size="3"]I want to share a simple way to add Ajax filter in CListView with enable history support.[/size]
[size="5"]Controller[/size]
[size="2"][b]
[/b][/size][size="2"]First we will make some changes in Controller.[/size]
public function actionIndex()
{
$model=new Test1('search');
$model->unsetAttributes(); // clear any default values
if(isset($_GET['Test1']))
$model->attributes=$_GET['Test1'];
if(isset($_GET['ajax']) && $_GET['ajax']=='ajaxListView') {
$this->renderPartial('index',array(
'dataProvider'=>$model,
));
} else {
$this->render('index',array(
'dataProvider'=>$model,
));
}
}
[size="5"]View[/size]
[size="2"][b]
[/b][/size][size="2"]In our CListView, first we will change our data provider.[/size]
<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider->search(),
'itemView'=>'_view',
'enableHistory' => TRUE,
'pagerCssClass' => "pagination",
'id' => 'ajaxListView',
)); ?>
[size="3"][color="#222222"][font="Arial, sans-serif"]We now add a form with get method for filtering.[/font][/color]
[/size][size="3"][color="#222222"][font="Arial, sans-serif"]
<div class="form">
<?php echo CHtml::beginForm('', 'get', array('id'=>'searchform')); ?>
<div class="row">
<?php echo CHtml::activeLabel($dataProvider,'id'); ?>
<?php echo CHtml::activeTextField($dataProvider,'id') ?>
</div>
<div class="row">
<?php echo CHtml::activeLabel($dataProvider,'fname'); ?>
<?php echo CHtml::activeTextField($dataProvider,'fname') ?>
<?php echo CHtml::endForm(); ?>
</div><!-- form -->
[/font][/color][/size][size="3"]
[font="Arial, sans-serif"][color="#222222"]Now add a Jquery script that send AJAX request when value in input filed is changed or enter button is pressed.[/color][/font]
[/size]
[size="3"]
<?php
Yii::app()->clientScript->registerScript('search',
"$('#searchform').change(function(event) {
SearchFunc();
return false;
});
jQuery('input').keydown(function (event) {
if (event.keyCode && event.keyCode == '13') {
SearchFunc();
return false;
} else {
return true;
}
});
function SearchFunc() {
var data = $('input').serialize();
var url = document.URL;
var params = $.param(data);
url = url.substr(0, url.indexOf('?'));
window.History.pushState(null, document.title,$.param.querystring(url, data));
}
");
?>
[/size]
[size="2"]Complete Code of our view is:[/size]
<?php
$this->breadcrumbs=array(
'Test',
);
$this->menu=array(
array('label'=>'Create Test1', 'url'=>array('create')),
array('label'=>'Manage Test1', 'url'=>array('admin')),
);
?>
<h1>Test</h1>
<div class="form">
<?php echo CHtml::beginForm('', 'get', array('id'=>'searchform')); ?>
<div class="row">
<?php echo CHtml::activeLabel($dataProvider,'id'); ?>
<?php echo CHtml::activeTextField($dataProvider,'id') ?>
</div>
<div class="row">
<?php echo CHtml::activeLabel($dataProvider,'fname'); ?>
<?php echo CHtml::activeTextField($dataProvider,'fname') ?>
<?php echo CHtml::endForm(); ?>
</div><!-- form -->
<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider->search(),
'itemView'=>'_view',
'enableHistory' => TRUE,
'id' => 'ajaxListView',
)); ?>
<?php
Yii::app()->clientScript->registerScript('search',
"$('#searchform').change(function(event) {
SearchFunc();
return false;
});
jQuery('input').keydown(function (event) {
if (event.keyCode && event.keyCode == '13') {
SearchFunc();
return false;
} else {
return true;
}
});
function SearchFunc() {
var data = $('input').serialize();
var url = document.URL;