Loading A Tabbed View Dynamically

Yii 1.1 General Discussion
1

Hi All,

I am using a tabbed interface in Yii since I need to display a lot of data (related to diff categories) in my index page.

All of these data are related to different models some of which are related while others unrelated. What I am finding so difficult is while passing data from the controller to the view

I need to retrieve all of the data and pass it on to the view. I think this is going to take a lot of time to load.

What I wanted to achieve was to pass control to the controller when different tabs are clicked so that it would all happen dynamically.

As an example I am using a test project to acheive it with very less data in it. Right now I am retrieving all the data in the controller and passing it on to the view. I just want to make this process dynamic. Any help would be much appreciated. Thanks.

Screenshot from example project:

Sitecontroller:




public function actionIndex()

	{

		$firstmodel = First::model()->findbyPK(1);

		$desc1 = $firstmodel->first;

		

		$secondmodel = Second::model()->findbyPK(1);

		$desc2 = $secondmodel->second;

		

		$thirdmodel = Third::model()->findbyPK(1);

		$desc3 = $thirdmodel->third;

		

		$this->render('index', 

			array(

				'desc1' => $desc1,

				'desc2' => $desc2,

				'desc3' => $desc3

			)

		);

	}

views/index.php




<div id="tabs">

  <ul>

    <li><a href="#tabs-1">First</a></li>

    <li><a href="#tabs-2">Second</a></li>

    <li><a href="#tabs-3">Third</a></li>

  </ul>

  <div id="tabs-1">

	<p> <?php echo $desc1;?></p>

  </div>

  <div id="tabs-2">

	<p> <?php echo $desc2;?></p>

  </div>

  <div id="tabs-3">

	<p> <?php echo $desc3;?></p>

  </div>

</div>
2

You can load content via ajax




$('#tabs a').on('click', function() { ..load content..}

or you can fake tabs and replace hrefs with real urls:




<li><a href="...your_current_url?tab=1">First</a></li>

<li><a href="...your_current_url?tab=2">Second</a></li>

<li><a href="...your_current_url?tab=3">Third</a></li>

Probably you may want to modify your action so that it will request content depending on tab number




public function actionIndex($tab = 1)

{

    if ($tab == 1) { .. load content for tab 1} else if (...)

}