Adding jQuery into Zend Framework Project

Though, Zend Framework (ZF) is shipped with set of Dojo libraries and various helpers/views to implement its methods, due to popularity of jQuery, the integration between the two is most seek.

In order to integrate jQuery, look for “extras/library/ZendX”, folder in your extracted copy of the download from Zend’s site (Full package, not the minimal one).

‘ZendX’, represents extended libraries created by third-parties and have been adopted/included by people at Zend.

Copy the folder ‘ZendX’, to the library folder of your working copy of your project or you can alternatively specify the path to ZendX folder in the php.ini configurations.

Further, there are two methods by which we can instruct our ZF project setup to include the jQuery library, while it is loaded.

First, add the following codes to ‘Bootstrap.php’ :

* 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.7')//jQuery version, automatically 1.5 = 1.7.latest
//->setUiVersion('1.8')//jQuery UI version, automatically 1.8 = 1.8.latest
//->addStylesheet('')//add the css
//->uiEnable() //enable ui

Secondly, you can specify the options in application.ini, as follows:

resources.Jquery.noconflictmode = false
resources.Jquery.version = 1.7.2
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"

With the library inclusion and initialization done, its time to look for manner in which it can be added to view/layout:

echo $this->jQuery();

yes, you are done, the above code would include the following line(s) in your rendered html for the selected view:

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

Happy Coding 😉


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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