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/

.