title: Integrating jQuery, jQuery UI, and jQuery Themes with the Zend Framework
body: <p><strong>Update:</strong> 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 <a href="https://stackoverflow.com/questions/1616857/">refer to this question</a>.</p>
  
  <hr>
  
  <p>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.</p>
  
  <p>In my bootstrap, I'm registering the jQuery view helper:</p>
  
  <pre><code>$view-&gt;addHelperPath(self::$root . '/library/ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
  </code></pre>
  
  <p>In my form, I have a date picker element:</p>
  
  <pre><code>$date = new ZendX_JQuery_Form_Element_DatePicker('date');
  </code></pre>
  
  <p>And in my layout, I'm calling the jQuery view helper:</p>
  
  <pre><code>&lt;head&gt;
      &lt;?= $this-&gt;jQuery() ?&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>From what I understand, the javascript files are automatically included (and hosted by Google). So in order to use different themes (from <a href="http://jqueryui.com/themeroller/" rel="nofollow noreferrer">ThemeRoller</a>) 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?</p>
  
  <p><strong>Update:</strong> I got it to work by doing this. But I'm not sure if this is the most effective way.</p>
  
  <pre><code>&lt;head&gt;
  &lt;? //I couldn't get this way to work
     //$this-&gt;jQuery()-&gt;addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');
     //But this way works
     $this-&gt;jQuery()-&gt;addStylesheet('/js/jquery/themes/ui-lightness/jquery-ui-1.7.1.custom.css')
                -&gt;setLocalPath('/js/jquery/js/jquery-1.3.2.min.js')
                -&gt;setUiLocalPath('/js/jquery/js/jquery-ui-1.7.1.custom.min.js') ?&gt;
      &lt;?= $this-&gt;jQuery() ?&gt;
  &lt;/head&gt;
  </code></pre>