Fully ajax website with Yii – Part 2
In previous post I described how to create simple full ajax web application without changing basically logic of the application. All changes was made to the layout, view and to the base classes.
But as you maybe already noticed not everything works well. For example if you tried to sign-in -menu won’t be updated. In this short article I will show how to fix such kind of problems.
All data which ouputs for ajax request collecting with help of flash messages (built-in Yii functionality);
So basically if you wand update something on your page you have to set flash message with name updatedata wich contains an array with key value elements
Example protected/controllers/SiteController.php ; actionLoginMethod
... // collect user input data if(isset($_POST['LoginForm'])) { $model->attributes=$_POST['LoginForm']; // validate user input and redirect to the previous page if valid if($model->validate() && $model->login()) { Yii::app()->user->setFlash('updatedata', array( '#mainmenu'=>$this->renderPartial('/includes/menu',array(),true),)); $this->redirect(Yii::app()->homeUrl); } ...
As you can see I put all mainmenu to separate file. Here is it’s content
protected/views/includes/menu.php
<?php $this->widget('zii.widgets.CMenu',array( 'items'=>array( array('label'=>'Home', 'url'=>array('/site/index')), array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')), array('label'=>'Contact', 'url'=>array('/site/contact')), array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest), array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest) ), )); ?>
For avoiding dublicating data I cut this code from main layout and put there renderPartial instead.
protected/views/layout/main.php
...
<div id="mainmenu" >
<?php $this->renderPartial('/includes/menu');?>
</div><!-- mainmenu -->
...So all blocks that might be updated via ajax better to move to includes folder. Now after sign -in main menu is changing.
Now we have to add the same code to sign-out method
protected/controllers/SiteController.php
... public function actionLogout() { Yii::app()->user->logout(); Yii::app()->user->setFlash('updatedata', array( '#mainmenu'=>$this->renderPartial('/includes/menu',array(),true),)); $this->redirect(Yii::app()->homeUrl); } ...
In that way you can update everyrhing you want on the webpage. Good luck!
P.S. Suggestions are welcome!
8 comments to “Fully ajax website with Yii – Part 2”
Июнь 18th, 2011 at 03:32
Hey, Thanks for your tips.
Can you teach me how to make «» without Ajax ?
Because i cant access anything url in outside my web page.
pleas email me.
Июнь 18th, 2011 at 03:43
And one more, when i submit the form, i cant redirect the page to view althought i’m using like this:
Yii::app()->user->setFlash(‘inputdata’, array(‘#content’=>$this->renderPartial(‘/ads/view’,array(),true),));
$this->redirect(array(‘view’,'id’=>$model->id_iklan));
Ноябрь 5th, 2011 at 15:30
thanks for that
Декабрь 12th, 2011 at 17:46
Hi! thanks for the tutorial i have only one concern: the back button works in all pages except n the home when it’s loaded directly using url domani, how can i solve that?
Январь 26th, 2012 at 07:37
Hi! Thanks for the really great helps! I love them so much!
Here I find a little confusing part. I can’t find the way to do about the sidebar so it can be loaded on the same way with the content. Could you show me, please?
One more thing is about the URL Address format. Could it be more user friendly without that long string? Just «myweb.com/index.php» or could be better even just «myweb.com»
Any response would be very appreciated.
Thanks a lot.
Февраль 12th, 2012 at 21:00
Thank you for sharing your knowledge and insight.
Февраль 16th, 2012 at 16:14
hi every one can u tell me how make new website fully in ajax….i mean to add new theme in yii project and in layout i want html content changing in via ajax
Апрель 11th, 2012 at 09:57
Hello Everyone ,
I have Successfully made my Website Ajax.
I Did it by Following the two tutorials Given By Tpoxa.
Cheers to Him
Now my problem is That , i am not able to change the url Structure
Its something like this :
projectname/#url=/projectname/news/index
Now my desired Url is something like this :
projectname/#!/projectname/news/index
In Short , i just want to repalce «#url=» with «#!»
Please Help
Thanks in Advace