Wednesday, September 17, 2014

Yii CListView/TbListView - jquery are not working after pagination

Recently i faced an issue in yii/ajax pagination that running some javascript/jquery function in the randerpartial view.

let me explain the issue here

i have a view.php  and the _view.php for partial file.  there are some jquery function in randerpartial(_view.php) file which will work with each item ID. so i just add the JQuery codes in the partial(_view.php) file .

on the first page load , the jquery functions are works fine and when i go for the second page using yii pagination . those jquery functions are not working . even when i use fire-bug / inspect element to view the code. those jquery codes are not there in the second page .its appearing on first view only.

while reading some forums and yii notes , found that yii-jquery firing some additional jquery codes on the pagination which overwrite / disabled mine. those says afterAjaxUpdate  will help to fix the issue as its will force to fire my jquery on pagination.

here i found thise useful link
but i found another shortcut too.

just made 'afterAjaxUpdate'=>'',  on the CListView/TbListView . will solve the problem as its not gonna fire any ajax/jquery code on the pagination , so my jquery will work normally on pagination.

problem solved!!!

my view.php:
1:  $this->widget('bootstrap.widgets.TbListView', array(  
2:                                     //'type'=>'striped bordered condensed',  
3:                                     'dataProvider'=>$dataProvider,  
4:                                     'id'=>'Manage',  
5:                                     'template'=>'{summary}{sorter}{items}{pager}',  
6:                                     'summaryText' => 'Showing {start} - {end} of {count} Jobs',  
7:                                     'itemView'=>'_view',  // refers to the partial view named '_post'  
8:                                     //'ajaxUpdate'=>false,  
9:                                     'emptyText'=>'<i> Sorry, there are no items to display</i>',  
10:                                     //'htmlOptions' => array('style'=>'margin-top:-20px;'),   
11:                                     'afterAjaxUpdate'=>'',                           
12:                                     'sortableAttributes'=>array(  
13:                                          'title'=>'Title',  
14:                                          'created'=>'Date Posted',  
15:                                          'status'=>'Status',  
16:                                ),  
17:                           ));  

1:  <select class="w-select status_action" id="Status_Action<?php echo $data->ID; ?>">  
2:            <option value="">Select one...</option>  
3:  .  
4:  .  
5:  .  
6:  .  
7:      </select>  
8:      <label class="updatestatus_text">Would you like to:</label>  
9:  <script>  
10:       $('#Status_Action<?php echo $data->ID; ?>').bind('change', function () {  
11:          var url = $(this).val(); // get selected value  
12:            if (url) { // require a URL  
13:                 window.location = url; // redirect  
14:            }  
15:            return false;  
16:       });  
17:  </script>  

adding this line helped me alot