Register An Extension.

Yii 1.1 Extensions
1

So guys I already spent 2 days in vain and was not able to solve. And now I need your help!

I downloaded the "yiibooster" extension to use one of its features called WIZARD as you can see in the URL below

yiibooster.clevertech.biz/widgets/grouping/view/wizard

Now I followed all the steps of installation

[b]1. Download the YII Bundle

  1. place that folder in the extension folder

my main.php in config looks like as below>

[/b]:

:

Yii::setPathOfAlias(‘yiibooster’, dirname(FILE).’/../extensions/yiibooster’);

:

:

return array (

‘import’=>array(

	'application.models.*',


	'application.components.*',


	'application.extensions.*',


	'editable.*', //easy include of editable classes


	'bootstrap.*',


	'yiibooster.*'


	),

// application components

'components'=>array(





	//X-editable config


	'editable' => array(


		'class'     => 'editable.EditableConfig',


        'form'      => 'bootstrap',        //form style: 'bootstrap', 'jqueryui', 'plain' 


        'mode'      => 'popup',            //mode: 'popup' or 'inline'  


        'defaults'  => array(              //default settings for all editable elements


        	'emptytext' => 'Click to edit')),





	'user'=>array(


		// enable cookie-based authentication


		'allowAutoLogin'=>true,


		),


	'bootstrap' => array(


		'class' => 'path.alias.to.booster.components.Bootstrap'),


	'bootstrap'=>array(


		'class'=>'bootstrap.components.Bootstrap',


		),


	// uncomment the following to enable URLs in path-format

:

:

the main.php file in the Layout looks as below

Yii::app()->bootstrap->registerAllCss();

Yii::app()->clientScript->registerCoreScript(‘jquery’);

    Yii::app()->clientScript->registerCoreScript('jquery.ui');


   $cs->registerScriptFile($baseUrl.'jquery-1.9.1.js');


    $cs->registerScriptFile($baseUrl.'/js/bootbox.js');


    $cs->registerScriptFile($baseUrl.'/js/bootstrap.js');


    $cs->registerScriptFile($baseUrl.'/js/bootstrap-popover.js');


    $cs->registerScriptFile(YiiBase::getPathOfAlias('yiibooster').'/assets/bootstrap-wizard/jquery.bootstrap.wizard.js',CClientScript::POS_END);


   :

:

:

:

OK So the problem is I can see the tabs and when I click on the tabs I can see the content per tab but I canot see the progress bar moving right.

2

There are options for TbWizard you have to configure in order for progress bar to work




'options' => array(

            'nextSelector' => '.button-next',

            'previousSelector' => '.button-previous',

            'firstSelector' => '.button-first',

            'lastSelector' => '.button-last',

            'onTabShow' => 'js:function(tab, navigation, index) {

						var $total = navigation.find("li").length;

						var $current = index+1;

						var $percent = ($current/$total) * 100;

						$("#wizard-bar > .bar").css({width:$percent+"%"});

			}',

            'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',

        ),

if you have the options configured then paste your view

3

[b]Thanks for the reply!

Please see the content of the view file ,I haven’t changed anything.[/b]

<?php

$this->widget(

'bootstrap.widgets.TbWizard',


array(


    'type' =&gt; 'tabs', // 'tabs' or 'pills'


    'pagerContent' =&gt; '&lt;div style=&quot;float:right&quot;&gt;


                &lt;input type=&quot;button&quot; class=&quot;btn button-next&quot; name=&quot;next&quot; value=&quot;Next&quot; /&gt;


                &lt;input type=&quot;button&quot; class=&quot;btn button-last&quot; name=&quot;last&quot; value=&quot;Last&quot; /&gt;


            &lt;/div&gt;


            &lt;div style=&quot;float:left&quot;&gt;


                &lt;input type=&quot;button&quot; class=&quot;btn button-first&quot; name=&quot;first&quot; value=&quot;First&quot; /&gt;


                &lt;input type=&quot;button&quot; class=&quot;btn button-previous&quot; name=&quot;previous&quot; value=&quot;Previous&quot; /&gt;


            &lt;/div&gt;&lt;br /&gt;&lt;br /&gt;',


    'options' =&gt; array(


        'nextSelector' =&gt; '.button-next',


        'previousSelector' =&gt; '.button-previous',


        'firstSelector' =&gt; '.button-first',


        'lastSelector' =&gt; '.button-last',


        'onTabShow' =&gt; 'js:function(tab, navigation, index) {


                    var &#036;total = navigation.find(&quot;li&quot;).length;


                    var &#036;current = index+1;


                    var &#036;percent = (&#036;current/&#036;total) * 100;


                    &#036;(&quot;#wizard-bar &gt; .bar&quot;).css({width:&#036;percent+&quot;%&quot;});


        }',


        'onTabClick' =&gt; 'js:function(tab, navigation, index) {alert(&quot;Tab Click Disabled&quot;);return false;}',


    ),


    'tabs' =&gt; array(


        array(


            'label' =&gt; 'Home',


            'content' =&gt; 'Home Content',


            'active' =&gt; true


        ),


        array('label' =&gt; 'Profile', 'content' =&gt; 'Profile Content'),


        array('label' =&gt; 'Messages', 'content' =&gt; 'Messages Content'),


    ),


)

);

?>

<div id="wizard-bar" class="progress progress-striped active">

&lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;

</div>

4

So. Can anyone help me please? How can I get the progress bar working?