Hi, i’m facing an issue with the filter input box in CGridView. So the filter is showing the correct result after entering the search string in the filter input box and hitting enter, but the input box is getting cleared after the result is being shown. This makes it quite inconvenient for the user to see what they was searching for because the filter input box is empty while the grid shows the correct search results.
Here are the code.
entry view name ::newsReleases.php
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'product-news-grid-' . $id,
'itemsCssClass' => 'table table-striped',
'htmlOptions' => array(
'class' => 'news-datagrid',
),
'dataProvider' => $dataProvider->searchProductNews($symbol),
'filter' => $dataProvider,
'enableHistory' => false,
'ajaxUpdate' => 'product-news-grid-' . $id,
'ajaxUrl' => Yii::app()->createUrl('/realTime/AjaxUpdateProductNews'),
'pager' => array(
'header' => '',
'cssFile' => false,
'maxButtonCount' => 5,
'selectedPageCssClass' => 'active',
'hiddenPageCssClass' => 'disabled',
'firstPageCssClass' => 'previous',
'lastPageCssClass' => 'next',
'firstPageLabel' => '<<',
'lastPageLabel' => '>>',
'prevPageLabel' => '<',
'nextPageLabel' => '>',
),
'summaryCssClass' => 'label label-warning',
'columns' => array(
array(
'name' => 'headlines',
'header' => 'Headlines',
'value' => function($data) {
return '<div class="product-news"> <a target="_blank" href="' . $data->link . '" > ' . $data->headlines . '</a></div>';
},
'type' => 'raw',
),
array(
'name' => 'publish_date',
'header' => 'Date',
'value' => function($data) {
return '<span class="news-pub-date">' . $data->publish_date . '</span>';
},
'type' => 'raw',
)
)
));
?>
<!-- Now this script had to be included again in order to make the ajax sorting and pagination work, or else none of the ajax functionality is working. Remember when getting stuck with ajax update in grid views always use this script -->
<script type="text/javascript" src="/ProductAnalysis/assets/dd5f9a70/gridview/jquery.yiigridview.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('[data-toggle=popover]').popover();
jQuery('body').tooltip({
"selector": "[data-toggle=tooltip]"
});
jQuery('#product-news-grid-' + $('#symbol-id').text()).yiiGridView({
'ajaxUpdate': ['product-news-grid-' + $('#symbol-id').text()],
'ajaxVar': 'ajax',
'pagerClass': 'pagination',
'loadingClass': 'grid-view-loading',
'filterClass': 'filters',
'tableClass': 'table table-striped',
'selectableRows': 1,
'enableHistory': false,
'updateSelector': '{page}, {sort}',
'filterSelector': '{filter}',
'url': '/ProductAnalysis/index.php/realTime/AjaxUpdateProductNews',
'pageVar': 'News_page',
'afterAjaxUpdate': function() {
jQuery('.popover').remove();
jQuery('[data-toggle=popover]').popover();
jQuery('.tooltip').remove();
jQuery('[data-toggle=tooltip]').tooltip();
$('#News_headlines').change(function() {
var inputVal = $(this).val();
$('#News_headlines').val(inputVal);
});
}
});
});
/*]]>*/
</script>
Here is the controller action named AjaxUpdateProductNews
public function actionAjaxUpdateProductNews() {
$dataProvider = new News();
$dataProvider->unsetAttributes();
if (isset($_GET['News'])) {
$dataProvider->attributes = $_GET['News'];
}
$id = explode("-", $_GET["ajax"]);
$realTime = RealTime::model()->findByPk($id[count($id) - 1]);
$this->renderPartial('_newsView', array(
'dataProvider' => new News(),
'symbol' => $realTime->symbol,
'id' => $realTime->id,
'headlines' => $_GET['News']['headlines'],
'publish_date' => $_GET['News']['publish_date']
));
}
and here is the view _newsView
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'product-news-grid-'. $id,
'itemsCssClass' => 'table table-striped',
'htmlOptions' => array(
'class' => 'news-datagrid',
),
'dataProvider' => $dataProvider->searchProductNewsSymbol($symbol, $headlines, $publish_date),
'filter' => $dataProvider,
'enableHistory' => false,
'ajaxUpdate' => 'product-news-grid-'. $id,
'ajaxUrl' => Yii::app()->createUrl('/realTime/AjaxUpdateProductNews'),
'pager' => array(
'header' => '',
'cssFile' => false,
'maxButtonCount' => 5,
'selectedPageCssClass' => 'active',
'hiddenPageCssClass' => 'disabled',
'firstPageCssClass' => 'previous',
'lastPageCssClass' => 'next',
'firstPageLabel' => '<<',
'lastPageLabel' => '>>',
'prevPageLabel' => '<',
'nextPageLabel' => '>',
),
'summaryCssClass' => 'label label-warning',
'columns' => array(
array(
'name' => 'headlines',
'header' => 'Headlines',
'value' => function($data) {
return '<div class="product-news"> <a target="_blank" href="'. $data->link .'" > '. $data->headlines .'</a></div>';
},
'type' => 'raw',
),
array(
'name' => 'publish_date',
'header' => 'Date',
'value' => function($data) {
return '<span class="news-pub-date">'. $data->publish_date .'</span>';
},
'type' => 'raw',
)
)
));
?>
Now like i said the filter is showing the result, but the input box is getting cleared after it shows the result. I tried to reinsert the val in the input box using jQuery’s change() handler, but it doesn’t works.
Please provide any sort of advice on how to retain the search string value in the filter box. Oh, btw other grids on the sites are working flawlessly, so its not a problem with missing files.
Thanks in advance,
Maxx