CListView can't load javascript in an _itemView.php When go to next page.

I’m newbie.

I’ve searched for the same problem on this board.

But I couldn’t find the clear answer.

What i want to do is that

CListView shows each the content in _itemView.php.

if user move mouse onto image box div in _itemView.php, then rollover div in _itemView should come out.

for this purpose, I inserted javascript code in _itemView.php.

the js code needs to know $data->id. That’s why i inserted the code in _itemView.php.

But this works fine only first page.

When i go to next page, the rollover div don’t come out.

I tried to use ‘afterAjaxUpdate’ option in CListView and insert js:function in the option.

But I couldn’t solve it.

Also I tried to use Yii::app()->clientScript. I couldn’t solve it too.

What should i do ? :-[

Here’s my code.

Controller




public function actionIndexByInt(){

		....

	

		$this->render('_indexTileList', array(

							'dataProvider'=>$dataProvider,

                ));

}



_indexTileList.php




<?php

$this->layout='//layouts/column1';

$dataProvider->pagination->pageSize = 12;

?>


<div class="list_box">

<?php 

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

	'id'=>'product-list',

	'dataProvider'=>$dataProvider,

	'cssFile' => Yii::app()->baseUrl . '/css/listViewStyle/listView_user_page.css',

	'pager' => array('cssFile' => Yii::app()->baseUrl . '/css/listViewStyle/listView_user_page.css',

					 'prevPageLabel'=>'< Prev',

					 'header'=>'',

					 'htmlOptions'=>array('onclick'=>'javascript:to_top();'),

					 'pageSize'=>10,),

	'itemView'=>'_itemView',   // refers to the partial view named '_itemView'

	'template'=>'{items}<br /><hr id="change_line" />{pager}',

	'sortableAttributes'=>array(

	     'price',

		),

));

?>

</div>



_itemView.php




<script type="text/javascript">

$(document).ready(function(){  

	var n = 0; 

	$("div.img_div<?php echo $data->id ?>").mouseenter(function(){ 

		MM_showHideLayers('item<?php echo $data->id ?>','','show');  //MM_showHideLayers() is custom function.

		}).mouseleave(function(){

			MM_showHideLayers('item<?php echo $data->id ?>','','hide'); 

			});  

}); 

</script>


<div class="item_box">

<!-- image box div  -->

<div class="img_div<?php echo $data->id ?>" style="border:1px solid silver;">

	

	

	<!--rollover div-->

	<div class="rollover_info" id="item<?php echo $data->id ?>">

	<div class="rollover_title"> <b><?php echo Yii::app()->utility->shortenStr($data->name, 20);?></b></div>

        ...

	</div>

	<!-- end rollover div  -->

...

</div>

<!-- end image box div -->

...

</div>



Might be the renderPartial, cant say for sure tho

try using render and you wlil find out

It’s a javascript event problem: $(document).ready() will only be fired on first page load. So better reconsider your implementation: Instead of adding so much javascript (1 script block per row) i’d rather use 1 global handler and attach it with jquery.delegate() to the listview container. Then it will still fire, even if the content of the container changes via AJAX.

Thanks gustavo and Mike. :lol:

@gustavo I used renderPartial(). :D

I didn’t try yet as Mike said.

But Mike is absolutely right in that point, so much javascript block per row is not good.

Instead of using jquery.delegate(), I used ‘afterAjaxUpdate’ option again and inserted custom javascript handler to manage each row.

it worked fine.

But I will give it a shot using jquery.delegate().

Thanks All !!

Hey Mike, I am facing this exact same problem and since I saw your suggestion I have been trying to find a way to implement it. However, i’m very new to jquery and php altogether, so I don’t know even where to start. I have been looking into the JQuery .delegate() documentation, and kind of got the idea, but my code isn’t working:


	$("body").delegate("li", "click", function(){

		  callMyFunction();

	});

When i click on any of the pagination buttons, then my function is called (which temporarily only paints the list items red), but immediately they turn back black again. Its as if I had added a jQuery .fadeOut(1000) effect… only that i didn’t. Help!! :(

I can’t really help much here. You must have some more Js on that page - but you should learn some more jQuery first. I can not do that job for you ;)