CODEWITHSUNDEEP
jqueryzend-frameworkuser-interfacedatepickerthemes
Andrew
Andrew

Reputation: 238647

Integrating jQuery, jQuery UI, and jQuery Themes with the Zend Framework

Update: this question refers to an older version of Zend Framework. To see how to integrate jQuery with a Zend Framework 1.9.4 (1.8+) application refer to this question.

I think I understand the basic concepts, but I must be going wrong somewhere. I'm trying to integrate jQuery, jQuery UI, and jQuery Themes into my Zend Framework application.

In my bootstrap, I'm registering the jQuery view helper:

$view->addHelperPath(self::$root . '/library/ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');

In my form, I have a date picker element:

$date = new ZendX_JQuery_Form_Element_DatePicker('date');

And in my layout, I'm calling the jQuery view helper:

<head>
    <?= $this->jQuery() ?>
</head>

Once I've done that, I can actually use the date picker. The only problem is that the calendar is totally screwed up. It doesn't display correctly at all.

From what I understand, the javascript files are automatically included (and hosted by Google). So in order to use different themes (from ThemeRoller) you have to host the js and css files on your own server. What process should I go through in order to get my date picker to display a different theme?

Update: I got it to work by doing this. But I'm not sure if this is the most effective way.

<head>
<? //I couldn't get this way to work
   //$this->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');
   //But this way works
   $this->jQuery()->addStylesheet('/js/jquery/themes/ui-lightness/jquery-ui-1.7.1.custom.css')
              ->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js')
              ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.1.custom.min.js') ?>
    <?= $this->jQuery() ?>
</head>

Upvotes: 2

Views: 14855

Answers (3)

Till
Till

Reputation: 22408

If you're using the Google CDN, you just have to host the .css files on your own server. I don't know if ZendX_Jquery uses that. And that should be all to get it working.

Upvotes: 0

emeraldjava
emeraldjava

Reputation: 11190

I think you need to download the jquery ui css files. Extract the css files from the zip and make them available locally within your zend app. I added the files to '[Your_zend_project_root]\public\js\'. In your layout.phtml file use the 'addStylesheet()' method to add the paths to the local css files. You need to change the specific path for the theme name you selected.

<?php echo $this->jQuery()
    ->setUiVersion('1.7.2')
    ->addStylesheet('/js/jquery-ui-1.7.2/development-bundle/themes/ui-lightness/jquery-ui-1.7.2.custom.css');?>

Upvotes: 0

Stefan Gehrig
Stefan Gehrig

Reputation: 83622

Using the ZendX_JQuery_View_Helper_JQuery view helper (of course you can also register the stylesheet with the Zend_View_Helper_HeadStyle view helper, but using the jQuery view helper will ensure that the stylesheet is only included when jQuery is enabled) you can register a stylesheet served from the Google CDN:

$view->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');

smoothness is the theme name according to the jQuery UI ThemeRoller gallery. See jQuery UI 1.7.1 release announcment blog post for more theme urls.

By the way, I'd suggest to jQuery-enable the view by using ZendX_JQuery::enableView($view). I personally think that this is much more apparent approach.

Upvotes: 3

Related Questions