Update content in AJAX with renderPartial Follow @yiiframework

The easiest way to update content in AJAX is to use the renderPartial method.

For this exemple I have three files: a controller (HelloWorldController.php) and two views (index.php and _ajaxContent.php)

controllers/HelloWorldController.php

class HelloWorldController extends CController
{
    public function actionIndex()
    {
        $data = array();
        $data["myValue"] = "Content loaded";
 
        $this->render('index', $data);
    }
 
    public function actionUpdateAjax()
    {
        $data = array();
        $data["myValue"] = "Content updated in AJAX";
 
        $this->renderPartial('_ajaxContent', $data, false, true);
    }
}

The actionIndex set myValue to "Content loaded" and this variable is passed to the view "index.php" and to "_ajaxContent.php"

Note: if using accessRules() in your controller file, you will need to modify accessRules() by adding the appropriate part of the function name to a rule set - in this case 'updateajax' like this:

array('allow',  // allow all users to perform 'index' and 'view' actions
    'actions'=>array('index','view','updateajax'),
    'users'=>array('*'),
        ),

views/helloWorld/index.php

<div id="data">
   <?php $this->renderPartial('_ajaxContent', array('myValue'=>$myValue)); ?>
</div>
 
<?php echo CHtml::ajaxButton ("Update data",
                              CController::createUrl('helloWorld/UpdateAjax'), 
                              array('update' => '#data'));
?>

The ajaxButton call "actionUpdateAjax" and the returned data are inserted in the div "data"

views/helloWorld/_ajaxContent.php

<?php echo $myValue ?>

Display $myValue

Now, run index.php?r=helloWorld

Enjoy!

Links ¶

Russian Version

Total 8 comments

#8655

rix.rix. at 2012/06/17 10:41am

Instead of the ajaxButton you can also use an ajaxLink

echo CHtml::ajaxLink('clickMe', array('ajax'), array('update'=>'#ajax-results'));

This will call actionAjax() in the controller and the div with id 'ajax-results' will be updated.

Great tutorial by the way - thanks!

#7309

Burzum at 2012/03/13 09:42am

You're welcome

@socialdev @vasireddy @nettrinity

You're welcome! I'm still woking with yii (of course, it's the best framework ever :) ), when I'll have more time I'll do more simple tutorials like this one :)

#7308

socialdev at 2012/03/13 09:27am

The best shortest clear example!

Thank you my friend, thank you for sharing such a simple example which shows the whole concept of AJAX using Yii. I think this is the most beautiful and clear example I've ever seen together with some Android Java examples. Thank you!

#6614

Fan_Of_Yii at 2012/01/21 05:29pm

Wonderful

Thanks for this wonderful tutorials .

Below is the code for radio button list

<?php echo CHtml::radioButtonList( 'cars','4', array(4 => 'GM', 5 => 'FORD'), array('separator' => '',
        'onChange'=>CHtml::ajax(array('type'=>'GET', 'url'=>array("editProfile/UpdateAjax"), 
'update'=>'#data'))));

YII FAN

#5583

nettrinity at 2011/10/21 04:27pm

Good

this is the kind of tutorials that I need!

#1942

zaccaria at 2010/10/18 06:51am

process output

Pay attention that this fourth parameter set to true can create conflict with existing widgets outside the rendered subform.

This can happen because Yii uses a counter for generate the widget ID, and if you are not rendering all the widget (if there are some outside your panel) the new widget will have the same Id of the external.

A partial solution for this problem is to set a unique Id for each compoment inside the rendered panel, this solves many problem

#344

gsatir at 2010/07/04 04:05pm

Notice that example has processOutput=true

The fourth parameter to renderPartial() is processOutput and it defaults to false. Note that it is set to true in actionUpdateAjax(). I've never paid any attention to this parameter until I tried to load a form through AJAX and the form has widgets on it. The widgets did not work because they weren't getting initialized by the usual call to .ready(). The solution seems to be processOutput=true. With that, the initialization code gets put into the HTML that is returned by the ajax call. My ajax-form-with-widgets now works.

#1058

nexus246 at 2009/12/22 04:03am

No need for 2 actions

Instead of using 2 actions you can put all logic in one.

if(Yii::app()->request->isAjaxRequest) { $this->renderPartial('_ajaxContent',$data); } else { $this->render('index',$data); }

Please login to leave your comment.