[EXTENSION] jQuery UI widgets

Why don't create a variable and use it in the array?

The embedded data will be parsed when the page is sent. If you don't want that you should use ajax data on the accordion.

Thanks for your reply. 

When you say create a variable I think you mean execute the php code outside of the panel and send the output to a variable, then output the variable in the panel via the array?  I understand that, but it's not what I'm trying to do. 

Quote

The embedded data will be parsed when the page is sent. If you don't want that you should use ajax data on the accordion.
What do you mean by this?  Can you elaborate?

Let me explain what I'm trying to do.  I want to have four panels in accordion each would perform a search using a combination of slider controls.  Therefore, I want to embed the jquery slider within the accordion.  I imagine this possible using jquery directly rather than this extension, but need to understand if it is possible using the extension.  I really don't have much exposure to jquery and don't want to have to go down that learning curve right now if I don't have to.

Thanks,

R

Hi rpaulpen,

you could place your panels contents in 4 views and call renderPartial before you pass the returned data to the accordion view.

example:



<?php


// the views with the panels contents (one of these views could hold a slider)


$view_Panel_1 = $this->renderPartial('panel_1', NULL, true);


$view_Panel_2 = $this->renderPartial('panel_2', NULL, true);





// the view with the accordion


$this->render('accordion', 


	array(


		'panel1' => $view_Panel_1,


		'panel2' => $view_Panel_2,


	)


);


?>


my result:

Posted Image

cheers ironic

thanks for your reply ironic.

Using your method, I'm able to execute php code within the panel, but when I add the slider I receive the following error:

YiiBase::include(EJqueryUiWidget.php) [<a href='yiibase.include'>yiibase.include</a>]: failed to open stream: No such file or directory


Source File





/Users/remo/html/yii/framework/YiiBase.php(292)





00280:      * Class autoload loader.


00281:      * This method is provided to be invoked within an __autoload() magic method.


00282:      * @param string class name


00283:      */


00284:     public static function autoload($className)


00285:     {


00286:         // use include so that the error PHP file may appear


00287:         if(isset(self::$_coreClasses[$className]))


00288:             include(YII_PATH.self::$_coreClasses[$className]);


00289:         else if(isset(self::$_classes[$className]))


00290:             include(self::$_classes[$className]);


00291:         else


00292: include($className.'.php');


00293:     }


00294: 


00295:     /**


00296:      * Writes a trace message.


00297:      * This method will only log a message when the application is in debug mode.


00298:      * @param string message to be logged


00299:      * @param string category of the message


00300:      * @see log


00301:      */


00302:     public static function trace($msg,$category='application')


00303:     {


00304:         if(YII_DEBUG)





I basically took the slider code from my main view and copied it to a panel view.

<?php

echo CHtml::textField('x2','',array('readonly'=>'true', 'style'=>'border:none;background: none;color:#C00000;font-weight:bold;'));

$this->widget('application.extensions.jui.ESlider',

              array(                   

                    'name'=>'slider',

                    'theme'=>'blitzer',

                    'enabled'=>true,

                    'minValue'=>0.0,

                    'maxValue'=>1000000.0,

                    'value'=>array(25000.0,1000000.0),

                    'linkedElements'=>array('x1','x2'),

                    'numberOfHandlers'=>2,

                    'range'=>true,

              'step'=>25000.0,

                    'htmlOptions'=>array('style'=>'width:10px;height:100px;margin:10px;')

                  )

            );

           

echo CHtml::textField('x1','',array('readonly'=>'true', 'style'=>'border:none;background: none;color:#C00000;font-weight:bold;'));

?>

I make the call from the main view as follows:

<?php

$view_Panel_1 = $this->renderPartial('panel1', NULL, true);

$this->widget('application.extensions.jui.EAccordion',

  array(

      'name'=>'accordion',

      'theme'=>'blitzer',

      'panels'=>array(

        'Panel 1'=>$view_Panel_1,

        'Panel 2'=>'<p>Panel 2<ul><li>item 1</li><li>item 2</li></ul></p>',

        'Panel 3'=>'hello',

        'Panel 4'=>'<i>Panel 4</i>',

      ),

      'options'=>array(

        'active'=>true,

        'autoHeight'=>false,

        'alwaysOpen'=>false

        /* 'icons'=>array("header"=>"ui-icon-plus", "headerSelected"=>"ui-icon-minus") */

      )

  )

);

?>

The slider code works fine when it is included in the man view and only errors out when added to the pane view. 

I'm not sure what the error is telling me, but seems it can't find a file or a permission issue.  I don't understand since it works when included in the main view. 

Thanks,

R

I figured out the error.  Just needed to import it

Yii::import('application.extensions.jui.*');

or needed to add an include statement in the view file. This only seems to be a problem when including the a widget within another(ie. slider within panel).

Thanks for your help.

R

Hello,

I used the JQuery UI theme builder to create and download a new theme.  I added it to the directory, added the new theme name to the EJqueryUIWidget.php file, but the theme does not do anything.  I just get the default themeless text. 

Is there a trick to getting new themes to work?

R

You don't need to modify the widget's code, just set useBundledStyleSheet to false and include the stylesheets you made with the theme roller in your views.

Well, I tried your suggestion and receive the following error:

CException


Description





theme must be one of: base, blacktie, blitzer, cupertino, darkness, dotluv, excitebike, hotsneaks, humanity, lightness, mintchoc, redmond, smoothness, southstreet, start, swankypurse, trontastic, vader

Here's my code:

$this->widget('application.extensions.jui.EAccordion',


   array(


      'name'=>'accordion',


      'theme'=>'onesearch',


      'panels'=>array(


         'Panel 1'=>'view_Panel_1',


         'Panel 2'=>'<p>Panel 2<ul><li>item 1</li><li>item 2</li></ul></p>',


         'Panel 3'=>'hello',


         'Panel 4'=>'<i>Panel 4</i>',


      ),


      'options'=>array(


         'useBundledStyleSheet'=>false,


      	 'autoHeight'=>true,


         'alwaysOpen'=>true


         /* 'icons'=>array("header"=>"ui-icon-plus", "headerSelected"=>"ui-icon-minus") */


      )


   )


);

Am I not setting the "useBundledStyleSheet" properly?  As well, when you say to include the css, you do mean the "php include statement" I assume?

Thanks,

R

I got the themes working but the option "useBundledStyleSheet=>true" doesn't seem to work.  I still had to add the theme to the list of valid themes in EJqueryUiWidget.php.  Here is my code:

View:

$this->widget('application.extensions.jui.EAccordion',


   array(


      'name'=>'accordion',


   	 'useBundledStyleSheet'=>true,


      'theme'=>'onesearch',


      'panels'=>array(


         'Panel 1'=>$view_Panel_1,


         'Panel 2'=>'<p>Panel 2<ul><li>item 1</li><li>item 2</li></ul></p>',


         'Panel 3'=>'hello',


         'Panel 4'=>'<i>Panel 4</i>',


      ),


      'options'=>array(


        


      	 'autoHeight'=>true,


         'alwaysOpen'=>true


         /* 'icons'=>array("header"=>"ui-icon-plus", "headerSelected"=>"ui-icon-minus") */


      )


   )


);
 

Also included the new css files at the top of the view using "<?php Yii::app()->clientScript->registerCssFile('css/onesearch/ui.slider.css'); ?> " for each of the necessary css files.

It's all working, but having to add the allowable theme to the file is still bugging me.  MetaYii, you mention that code change is not required so you might want to check that.  I tried following it but got lost. 

Overall, great extension.  Thanks for sharing.

R

Quote

I got the themes working but the option "useBundledStyleSheet=>true" doesn't seem to work.  I still had to add the theme to the list of valid themes in EJqueryUiWidget.php.

Good Morning rpaulpen,

the option "useBundledStyleSheet" set to true, means that the widget should try to use a style that is in the validThemes array in the EJqueryUiTheme class.

Quote

It's all working, but having to add the allowable theme to the file is still bugging me.  MetaYii, you mention that code change is not required so you might want to check that.  I tried following it but got lost.

If you want to avoid code changes in the base classes, you can try the following approach…

Deriver a class from the widget you´re using and extend the registerClientScripts method.



<?php


require_once(dirname(__FILE__).DIRECTORY_SEPARATOR.'EAccordion.php');





class EMyAccordion extends EAccordion


{


	public function registerClientScripts()


	{


		parent::registerClientScripts();


		$this->clientScript->registerCssFile($this->baseUrl.'/themes/mytheme/ui.all.css');


	}


}


?>

and use the new classes like:



<?php


$this->widget('application.extensions.jui.EMyAccordion',


	array(


		'name' => 'MyAccordion',


		'compression' => 'none', 


		'panels'=>array(


			'Panel 1' => 'Panel 1 Content',


			'Panel 2' => 'Panel 2 Content',


		),


		'options'=>array(


			'animated' => false,


		)


	)


);


?>

(as always but without ‘theme’ and ‘useBundledStyleSheet’ option)

greets ironic

Or you can place this in your view:

Quote

     

$this->clientScript->registerCssFile($this->baseUrl.'/themes/mytheme/ui.all.css');

Thank everyone for your help. Everything is working fine.

Regards,

R

Hi,

i load page with EDatePicker by ajax request and i have problem with translation. I set 'language'=>'pl_PL' and does not work. When i get page direct all is fine.

My code:



<?php echo $this->widget('application.extensions.jui.EDatePicker',


	array(


   	'model'=>$user,


      'attribute'=>'start',


      'language'=>'pl_PL',


      'theme'=>'base', 


      'compression'=>'none',


      'mode'=>'imagebutton',


		'fontSize'=>'0.75em'


     ));?>




$this->renderPartial('create',array('user'=>$user),false,true);


Where is the problem?

You'll need to include the translation file directly in your view. Take a look to the HTML code generated by the widget to include the file when not in "ajax mode", copy & paste it to the view. If you will need to switch between languages, you'll need to add the selection logic inside the view too.

:) helped

I have another question. How can I show dialog box in my own JavaScrip code? I would like to show the dialog box (confirmation box) before I load page by ajax.

I think you should use javascript calls for that. Check http://jqueryui.com/

ok, but how get I assets path?

Maybe I know :) I have to do like in this topic: http://www.yiiframew…opic,789.0.html

Quote

Maybe I know :) I have to do like in this topic: http://www.yiiframew...opic,789.0.html

Exactly :)

<?php


$this->beginWidget('application.extensions.jui.EDialog',


	array(


		'name'        => 'confirm',


		'theme'       => 'redmond', 


		'compression' => 'none', 


		'htmlOptions' => array(


			'title' => 'Please confirm...'


		),


		'options' => array(


			'modal'			=> true,


			'autoOpen'		=> false,


			'draggable'     => false,


			'resizable'	  => false,


			'closeOnEscape' => false,


			'width'			=> 350,


			'height'		  => 120,


			'minHeight'	  => 120,


		),


		'buttons' => array (


			'Cancel' => 'function(){$(this).dialog("close");}',


			'Ok' => "function(){


						$.ajax({type: 'GET', url: 'index.php',


							data: 'r=site/coreversion',


							dataType: 'text',


							success: function(data){alert(data);}


						});						


						$(this).dialog('close');


					}",


		),


	)


);


echo "Are you sure that you want to run this request?";


$this->endWidget('application.extensions.jui.EDialog');


?>

would do the trick.

Posted Image

greets ironic

jQuery UI 1.7 released  ;D -> http://blog.jqueryui…3/jquery-ui-17/