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

	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

...

...

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!

Full ajax Yii webapp demo

9 thoughts on “Fully ajax website with Yii – Part 2”

  1. 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));

  2. 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?

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

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

  5. 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 🙂

  6. Sorry for the long response but I am really do not know how to do that. If you already found an answer please post it here. Thanks. Tpoxa

Leave a Reply to exralvio Cancel reply

Your email address will not be published. Required fields are marked *