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
echo $myValue
Display $myValue
Now, run index.php?r=helloWorld
Enjoy!
Links
Total 10 comments:
Yes, nice remarks. But the idea is to create a complex page in _ajaxContent.php, with data grid or other.
Nice writeup, this is the method I usually use. Except sometimes I also do what rickgrana said. Not enough people understand how to do this correctly..
Hello,
While rickgarana's solution works (and it's very tempting) it violates the basics of the MVC pattern, by putting VIEW related information into a CONTROLLER!
Just saying, keep it real ;)
--iM
I know i'm violating MVC XD
But sometimes I prefer to do this intead of creating many tiny views.
As I said, just mentioning, use it carefully =)
Except, when you nest the rendPartial in a partially rendered content with the ajax call, the jQuery ajax helper do not register.
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);
}
better to use Yii::app()->end() instead of die();
Hello. I've changed only the name of controller from HelloWorld -> HelloWorldAjax. I think this is no reason to get this error:
Source File
/home/guia/domains/guia.....net/public_html/yii-web/protected/views/layouts/main.php(42)
00041: <?php $this->widget('zii.widgets.CBreadcrumbs', array(
00042: 'links'=>$this->breadcrumbs,
00043: )); ?>
00044:
00045:
00046: <?php echo $content; ?>
00047:
Where could be the problem?
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.
Just mentioning, you can avoid creating the view views/helloWorld/_ajaxContent.php
You can just do
public function actionUpdateAjax() { echo "you AJAX value"; die; // to prevent the Yii debug text injection }