Update content in AJAX with partialRender

The easiest way to update content in AJAX is to use the partialRender 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 ¶

Total 5 comments

#6614

vasireddy 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.