[HOWTO] Insert widget inside content of CJuiTabs widget in Yii Framework

UPDATE: See the comment from “Mario De Weerd” below. Although it works in the same way, his technique seems more elegant.

I am using Yii PHP Framework 1.1.7 for developing a site. I needed to insert EColorPicker widget inside the content of a tab in CJuiTabs. If $this->widget returned the generated string for embedding a widget, I could use the following code to achieve this:

echo $this->widget('zii.widgets.jui.CJuiTabs', array(
        'tabs' => array(
            'Size' => array('ajax' => array('sizeselection')),
            'Background' => array('content' => $this->widget('application.extensions.colorpicker.EColorPicker',
              array(
                    'name'=>'cp',
                    'mode'=>'textfield',
                    'fade' => false,
                    'slide' => false,
                    'curtain' => true,
                   )
             );),
            //'Colors' => array('ajax' => array('colorselection')),
            'Text' => array('ajax' => array('textselection')),
        ),
        // additional javascript options for the tabs plugin
        'options' => array(
            'collapsible' => true,
        ),
    ));

However, since $this->widget() does not return the string and echoes it instead, I had to do the following to achieve this:

ob_start();
$this->widget('application.extensions.colorpicker.EColorPicker',
              array(
                    'name'=>'cp',
                    'mode'=>'textfield',
                    'fade' => false,
                    'slide' => false,
                    'curtain' => true,
                   )
             );
$colorPicker = ob_get_contents();
ob_end_clean();
    $this->widget('zii.widgets.jui.CJuiTabs', array(
        'tabs' => array(
            'Size' => array('ajax' => array('sizeselection')),
            'Background' => array('content' => $colorPicker),
            //'Colors' => array('ajax' => array('colorselection')),
            'Text' => array('ajax' => array('textselection')),
        ),
        // additional javascript options for the tabs plugin
        'options' => array(
            'collapsible' => true,
        ),
    ));

I don’t know if it is appropriate to use it like this, but in my case this worked fine.

Hope this helps.

If you enjoyed this post, make sure you subscribe to my RSS feed!
  • Very useful´╝îthanks

  • Mario De Weerd

    Hre is another way: create a partial view in which you call the widget.
    $colorPicker=$this->renderPartial(‘partial-view-name’,NULL,$return=true)

    in the partial view:
    $this->widget(‘application.extensions.colorpicker.EColorPicker’,
    array(
    ‘name’=>’cp’,
    ‘mode’=>’textfield’,
    ‘fade’ => false,
    ‘slide’ => false,
    ‘curtain’ => true,
    )
    );

  • Jason

    I was able to accomplish this within the Widget with

    Yii::app()->controller->widget(….);

  • Vikas

    Thanks… It was very useful for me……