CListView, scripts tags not working on ajax update

Yii 1.1 General Discussion
1

Hi, I’m facing a problem when I use CListView updating with ajax, I think maybe it is a bug (maybe a JQuery bug). The problem is that the javascript code inside script tags coming with the page requested with ajax are not being including nor evaluating in the document. This is easy to reproduce, using the blog demo included in the current stable release (yii-1.1.10.r3566):

1- In PostController.actionIndex() set the CActiveDataProvider.pageSize=1:




$dataProvider=new CActiveDataProvider('Post', array(

	'pagination'=>array(

		'pageSize'=> 1,

	),

	'criteria'=>$criteria,

));

2- In views/post/_view add some javascript at the end:




<script>

	alert(1);

</script>

Now, as the blog demo starts with two post, and page size is now 1, there will be two pages. When you load the home, the first page will show the alert, but, when you go to page 2, the alert is not shown.

This only happens with ajax, if you set CListView.ajaxUpdate= false in /views/post/index, the alert is shown in each page:




<?php $this->widget('zii.widgets.CListView', array(

	'dataProvider'=>$dataProvider,

	'ajaxUpdate'=> false

	'itemView'=>'_view',

	'template'=>"{items}\n{pager}",

)); ?>

I think to know where is the problem. It is at javascript level in jquery.yiilistview.js. When the data is requested with ajax, it is added in the document in the next way:




	$(id).replaceWith($(id,'<div>'+data+'</div>'));

As we can see, it is using the option context for the selector. I think when the html is searched in a certain context and then added to the document, the scripts tags are ignored. I googled it and searched just one post without response.

Well, anyone faced this problem? I do not want to change the javascript file of the framework. Please help me, Thanks!!

2

Hello, it’s normal. You should use ‘afterAjaxUpdate’ property for your CListView widget. For example, if you want to attach datepicker control to some inputs in your list, you can use following code:




$jsScript = "$('.withDatePicker').datepicker();";

$this->widget('zii.widgets.CListView', array(

	'dataProvider' => $dataProvider,

	'itemView' => '_item',

	'afterAjaxUpdate' => 'js:function(){' . $jsScript . '}',

));

Yii::app()->clientScript->registerScript(__FILE__ . '#attachDatepicker', $jsScript);

Note, that inputs with ‘withDatePicker’ class will receive CJuiDatepicker attached to them.

3

Thank you for reply!

It would worked with previous version of JQuery 1.4, so I do not know if it could be called normal. And, if the file jquery.yiilistview.js would add the markup without the option context, it would worked too.

I could use afterAjaxUpdate, but, it breaks my architecture and I think is not a good practice because the file that displays the list view would be too overlapped with the file that display the item view. In your example, there is overlapping in only one css class (.withDatePicker), but, in my case, would be too much things overlapped.

4

Hi

I have the same problem i can not use this solution because my scripts are generated live on render is there a workaround for this?