views:

5481

answers:

3

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>
A: 

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. Can you share more code (e.g. the source code of the rendered page) if my answer does't help you?

Till
+2  A: 

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.

Stefan Gehrig
what does ZendX_JQuery::enableView() do? Is that something different than adding the view helper path to the view?
Andrew
At the moment: no. It checks whether the path is already registered and registers the path if not. But it's less code to type and everybody looking at the code can imagine what this line is doing. It's really only a matter of preference.
Stefan Gehrig
Humm - seems directory listing is disabled on this url resource'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes'is there a way to find out a list of all themes which are available?
emeraldjava
See here: http://blog.jqueryui.com/2009/03/jquery-ui-171/ Google Ajax Libraries API > Themes (the available themes are the standard ones in the ThemeRoller gallery: http://jqueryui.com/themeroller/)
Stefan Gehrig
How can I set the media attribute via the zend API? I need to be able to define a print.css and ensure the media="print" attribute is set in the final rendered html. e.g <link rel="stylesheet" href="blah.css" type="text/css" media="print"/>
emeraldjava
A: 

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');?>
emeraldjava