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() {

$this->bootstrap('view');
$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('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css')//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:

<?php

echo $this->jQuery();

?>

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Cheers!

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/

.

About these ads

16 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?
    Thanks
    Marc

    • 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

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s