CODEWITHSUNDEEP
phpyii
johnny j
johnny j

Reputation: 295

Ajax tab in zii tab widget

Below i have an ajax tab example:

$this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs' => array(
            'StaticTab 1' => 'Content for tab 1',
            'StaticTab 2' => array('content' => 'Content for tab 2', 'id' => 'tab2'),
            // panel 3 contains the content rendered by a partial view
            'AjaxTab' => array('ajax' => $this->createUrl('/AjaxModule/ajax/reqTest01')),
    ),
    // additional javascript options for the tabs plugin
    'options' => array(
            'collapsible' => true,
    ),
));

but i don't know what happens in /AjaxModule/ajax/reqTest01. There is a missing part in this example, the rendering view, and i don't know how to design it so that the ajax call to work. Thanks.

Upvotes: 0

Views: 1132

Answers (1)

bool.dev
bool.dev

Reputation: 17478

According to the code you have put up, specifically this line:

'AjaxTab' => array('ajax' => $this->createUrl('/AjaxModule/ajax/reqTest01')),

We know that we need ajaxmodule, ajax controller, reqtest01 action, so do the following steps:

First

Create a module, it'll have to be named AjaxModule.

Second

Create a controller in this AjaxModule named Ajax.

Third

Create an action within this Ajax controller, named ReqTest01.
Within this action you can either directly echo html, or use renderPartial(), to render a view file partially for ajax.

So your controller Ajax and the action within looks somewhat like this

<?php

class AjaxController extends Controller
{
    public function actionIndex()
    {
          $this->render('index');
    }

    public function actionReqTest01(){
          // directly echoing output is hardly of any use, like echo "Directly echoing this";
          $this->renderPartial('rendpar_ajax'); // renderPartial is way better as we have a view file rendpar_ajax.php that we can manipulate easily
    }
}

Fourth

Now we can code the rendpar_ajax.php view file, create this file in the views folder of the ajaxController controller in the AjaxModule module.

<?php
  // rendpar_ajax.php file for ajax tab
  // have any code here, use widgets, form, html helper etc
  echo "<h1>AjaxModule--AjaxController--actionReqTest01</h1>";
  echo "<p>This view is partially rendered</p>";

Read more about creating modules, controllers, actions, and how they are used, and how the yii directory hierarchy works.
Good luck!

Edit: Note that to a view we can also pass dataproviders for getting complex dynamic views.

Upvotes: 3

Related Questions