Yii Framework Forum: [EXTENSION] jQuery UI widgets - Yii Framework Forum

Jump to content

  • (8 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] jQuery UI widgets Rate Topic: ***** 2 Votes

#21 User is offline   sebas 

  • Advanced Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 500
  • Joined: 28-October 08
  • Location:Buenos Aires, Argentina

Posted 01 March 2009 - 11:24 AM

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.


0

#22 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 01 March 2009 - 11:46 AM

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
0

#23 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 02 March 2009 - 02:27 AM

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
0

#24 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 02 March 2009 - 12:36 PM

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
0

#25 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 02 March 2009 - 04:04 PM

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
0

#26 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 02 March 2009 - 04:11 PM

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
0

#27 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 02 March 2009 - 04:42 PM

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.
0

#28 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 02 March 2009 - 05:28 PM

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

0

#29 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 02 March 2009 - 08:09 PM

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
0

#30 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 03 March 2009 - 01:11 AM

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
0

#31 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 03 March 2009 - 10:52 PM

Or you can place this in your view:

Quote

     

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

0

#32 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 04 March 2009 - 06:39 AM

Thank everyone for your help. Everything is working fine.

Regards,

R
0

#33 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 294
  • Joined: 20-November 08

Posted 04 March 2009 - 03:43 PM

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?
0

#34 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 04 March 2009 - 04:57 PM

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.
0

#35 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 294
  • Joined: 20-November 08

Posted 06 March 2009 - 03:11 PM

:) 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.
0

#36 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 06 March 2009 - 03:53 PM

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

#37 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 294
  • Joined: 20-November 08

Posted 06 March 2009 - 03:56 PM

ok, but how get I assets path?
0

#38 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 294
  • Joined: 20-November 08

Posted 07 March 2009 - 04:45 AM

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

#39 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 07 March 2009 - 04:54 AM

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
0

#40 User is offline   gib 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 08-February 09

Posted 07 March 2009 - 05:56 AM

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

Share this topic:


  • (8 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users