Using jQuery and jQuery ui with Zend Framework

talkin' jquery ui
Image by "Cowboy" Ben Alman via Flickr


For those jQuery fanatics like me wants to jQuery enabled in their Zend framework application, zf provides view and form helpers through it ‘extras’ library, also it is handy to enable.

At Bootstrap class add the following initialization method like below:

* init jquery view helper, enable jquery, jqueryui, jquery ui css

protected function _initJquery() {

$view = $this->getResource('view'); //get the view object

//add the jquery view helper path into your project
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");

//jquery lib includes here (default loads from google CDN)
$view->jQuery()->enable()//enable jquery ; ->setCdnSsl(true) if need to load from ssl location
     ->setVersion('1.5')//jQuery version, automatically 1.5 = 1.5.latest
     ->setUiVersion('1.8')//jQuery UI version, automatically 1.8 = 1.8.latest
     ->addStylesheet('')//add the css
     ->uiEnable();//enable ui


At the <head> section of your document or at layout.html, to enable jQuery at your each pages just echo like below:


echo $this->jQuery();


So you will have jQuery and jQuery ui files added into your document section like as always:

<link rel="stylesheet" href="" type="text/css" media="screen" />

<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>


N.B: in order to use ZendX library under extras/library/ZendX, the ZendX directory path should be in your php include_path or alternatively can SymLink the ZendX directory under your /application/library/


17 thoughts on “Using jQuery and jQuery ui with Zend Framework

  1. Hi,
    When I use any jQuery() function the apllication breaks. The jQuery is not added into the document section. I’ve verified the php root and library for Zend and ZendX and doesn’t seec to be any problem. I’m using ZF version 1.11.6. Is there any test for the correct function of ZendX?


    1. as you have ZendX into your include path, then the code suppose to work.
      possible solutions can be:
      – check your document source that jQuery files added properly
      – using firebug for firefox, run “jQuery” in console, should return jQuery as function()
      – remember if ur using https://yourservername… then dont forget to use ->setCdnSsl(true)
      – still having problem ? post your details code samples here…

      wish u luck


  2. Thanks Tonu bhai for such tutorial regarding on ZendX_JQuery. Actually i have googling for this one but truly speaking your tutorial helps me enough.

    Thanks for your nice contribution.


  3. Hello,

    allways when i call “$this->bootstrap(‘view’);” i get the error “Uncaught exception ‘Zend_Application_Bootstrap_Exception’ with message ‘Resource matching “view” not found’ in C:\Users\robin\workspace\aww\library\Zend\Application\Bootstrap\BootstrapAbstract.php:694″.

    Is there any other way to acces the $view object? I mean the same, i can call in the Controller.

    It would help me a lot!

    regards Robin


    1. 1. Make sure the following is set in your application.ini config …
      resources.view[] = “”

      2. call view resource from controller using following within actions:

      $bootstrap = $this->getInvokeArg(‘bootstrap’);
      $view = $bootstrap->getResource(‘view’);
      $view = new Zend_View();

      better check out this part


  4. If you prefer the application.ini version instead of writing a Bootstrap function, here is the code for this:

    resources.Jquery.noconflictmode = false
    resources.Jquery.version = 1.7
    resources.Jquery.enable = true
    resources.Jquery.ui_enable = false
    resources.Jquery.ui_version = 1.8
    resources.Jquery.cdn_ssl = false
    resources.Jquery.render_mode = 255
    ; resources.Jquery.stylesheet = "/some/file.css"
    ; resources.Jquery.stylesheets.0 = "/some/file.css"

    You need all the files and folders from extras/library/ZendX for this to work.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.