First time using jquery - some problems

Archives Yii 1.0.x Discussions
1

To practice using jquery/ajax I decided to make my user list pagination use ajax.  The code is below.

My first problem is that it only works for the first ajax request.  It is programmed so that if the user has JavaScript turned off in their browser, it will still work just fine.  But the ajax only works on the first request.

e.g:

open page 1 > press page 2 (uses ajax, works) > press page 3 (screws up, not ajax) > press page 4 (works again, uses ajax) > press page 5 (screws up again, not ajax)

The second problem is that some of the code returned by the ajax includes CHtml::linkButton's which tries to create JS in the ready() function.  The problem is that the ready function is not returned in the ajax request (it is normally outputted above </body>), so the 'delete' buttons are not working.

Is there something simple I should do to fix this? any suggestion?  And i'm dumbfounded as of why the ajax only works on the first requests.

<?php


// ----- controller -----------------------------------------


public function actionList() {


	$criteria = new CDbCriteria;





	$pages = new CPagination(User::model()->count());


	$pages->pageSize = 2;


	$pages->applyLimit($criteria);


	


	$sort = new CSort('User');


	$sort->applyOrder($criteria);


	


	$users=User::model()->findAll($criteria);


	


	if (Yii::app()->request->isAjaxRequest)


		$this->renderPartial('listPage', compact('users', 'pages', 'sort'));


	else


		$this->render('list', compact('users', 'pages', 'sort'));


}





// ------- list.php view -----------------------------------------


?>





<h2>User List</h2>


<div id="listPage">


	<?php


		$this->renderPartial('listPage', compact('users', 'pages', 'sort'));


	?>


</div>





<?php


$script = <<<EOD


$('.yiiPager a').click( function () {


	$.post($(this).attr('href'), {}, function(page) {


		$('#listPage').html(page);


	});





	return false;


});


EOD;





Yii::app()->clientScript->registerScript('userListPagination', $script, CClientScript::POS_READY)








// -------- listPage.php view -----------------------------------------


echo $this->widget('CLinkPager',array('pages' => $pages)); ?>


<table class="dataGrid">


	<tr>...</tr>


<?php foreach($users as $n => $user): ?>


	<tr class="<?php echo $n%2 ? 'even' : 'odd' ?>">


		...


		<td>


			...


			<?php echo CHtml::linkButton('Delete', array('submit' => array('delete', 'id' => $user->id), 'confirm' => 'Are you sure?')); ?>


		</td>


	</tr>


<?php endforeach; ?>


</table>
2

Update:

I found out that If I put the pagination links OUTSIDE of the ajax (eg I put the pagination links outside of the div that gets updated with ajax), it works fine (as far as loading the content consistently).

I do not want this solution however as the pagination links wont update as I change pages.

But this gives me a clue to the problem: perhaps the jquery event do not work on updated content??  Is there something I am missing?

3

Another update:

I was able to fix the ajax to work more than once.  I moved the JS code into the ajax part of the view by using CHtml::script() instead of the CClientScript.

But I still have the problem of the JS not working for the 'delete' buttons (generated with the yiic tool). I understand the problem but can not think of a good solution without extending the paginator to dump the JS into the ajax view instead of CClientScript.  Any thoughts?

4

What if in registerScript() you could set the position to a string, eg:

Yii::app()->clientScript->registerScript('myID', "js code", "position name")

Then you could dump all the js code in a position in the view with the following:

echo Yii::app()->clientScript->getScript('position name');

Then you could add a argument to CHtml::linkButton (and other such methods) to define the position of the JS code generated.

This way you could easily dump the generated JS into the ajax view.

Some ideas, no idea if they are any good or not.

5

So you are in this issue. ;)

http://code.google.c…es/detail?id=38

6

I just found a better way of solving the "the ajax only works the first time" problem by using the jquery bind() function (i believe you could also use the live() functions).

So I don't think the problem lies in Yii at all.

Here is the code before:



jQuery(document).ready(function() {





function updatePage() {


	$.post($(this).attr('href'), {}, function(page) {


		$('#listPage').html(page);


	});





	return false;


}





$('.yiiPager a').click(updatePage);





});

and after:



jQuery(document).ready(function() {





function updatePage() {


	$.post($(this).attr('href'), {}, function(page) {


		$('#listPage').html(page);


		$('.yiiPager a').bind("click",updatePage); //this is the new line


	});





	return false;


}





$('.yiiPager a').click(updatePage);





});

So now after it updates the content with the ajax return, it re-binds all the links with bind().

Works perfectly now.

7

Hi guys,

I think I have the same problem.

Is there any workaround for this using Yii?

I rather not call JQuery directly if possible…

Thanks,

Daniel