Loading a block through AJAX in YII

Nowadays, it's common when a part of a page is loaded asynchronously. Let's implement
the quotes box which will display random quotes and will have the "Next quote" link to show
the next one.
Getting ready
ff Create a fresh Yii application using yiic webapp as described in the official guide
ff Configure application to use clean URLs
Carry out the following steps:
1. Create a new controller named protected/controllers/QuoteController.
php as follows:
<?php
class QuoteController extends Controller
{
private $quotes = array(
array('Walking on water and developing software from a
specification are easy if both are frozen.', 'Edward V Berard'),
array('It always takes longer than you expect, even when you
take into account Hofstadter&rsquo;s Law.', 'Hofstadter&rsquo;s
Law'),
array('Always code as if the guy who ends up maintaining
your code will be a violent psychopath who knows where you live.',
'Rick Osborne'),
array('I have always wished for my computer to be as easy to
use as my telephone; my wish has come true because I can no longer
figure out how to use my telephone.', 'Bjarne Stroustrup'),
array('Java is to JavaScript what Car is to Carpet.', 'Chris
Heilmann'),
);
private function getRandomQuote()
{
return $this->quotes[array_rand($this->quotes, 1)];
}
function actionIndex()
{
$this->render('index', array(
'quote' => $this->getRandomQuote()
));
}
function actionGetQuote()
{
$this->renderPartial('_quote', array(
'quote' => $this->getRandomQuote(),
));
}
}
2. We will require two views. The first is protected/views/quote/index.php:
<h2>Quote of the day</h2>
<div id="quote-of-the-day">
<?php $this->renderPartial('_quote', array(
'quote' => $quote,
))?>
</div>
<?php echo CHtml::ajaxLink('Next quote', array('getQuote'),
array('update' => '#quote-of-the-day'))?>
The second view named protected/views/quote/_quote.php is as follows:
&ldquo;<?php echo $quote[0]?>&rdquo;, <?php echo $quote[1]?>
3. That is it. Now, try to access your quote controller and click on the Next quote link,
How it works...
First, we define a list of quotes in the controller's private property $quotes and create
a method to get a random quote. In a real application, you will probably get a quote from a
database using DAO or an active record.
Then, we define a view for the index action and _quote which is used in the getQuote
action that renders it without layout and the index view as a partial. In the index action,
we use CHtml::ajaxLink to create a link which makes a request to the getQuote action
and updates the HTML element with the ID of quote-of-the-day. This is done with a
response CHtml::ajaxLink that generates the following code in the resulting HTML page
(reformatted):
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('body').delegate('#yt0','click',function(){jQuery.ajax({
'url':'/quote/getQuote',
'cache':false,
'success':function(html){
jQuery("#quote-of-the-day").html(html)
}
});
return false;
});
});
/*]]>*/
</script>
As jQuery is being used, Yii includes it in the page automatically and does it only once, no
matter how many times we are using it.If you want to customize the success callback, then you can do this by setting it through a
third parameter as follows:
<?php echo CHtml::ajaxLink('Next quote', array('getQuote'),
array('success' => 'js:function(data){
alert(data);
}'))?>