JQuery with Zend Framework

A couple of years ago I incorporated some jquery stuff, and some jquery-ui stuff into a website I had built on Zend Framework. At that time Zend Framework didn’t have its own support for jquery (or if it did, I didn’t know about it).

Now I’m working on a new site, and I find that there is now a jquery view helper to help do jquery stuff. It is located in the “extras” library. I also didn’t know about this library. When did this get added? Anyway, stumbling around on the net I discovered that there is now some jquery support in Zend Framework. Cool. So I set about learning how to use it.

I often find the documentation in the Programmers Reference in Zend Framework to be very cryptic and difficult. Probably this is because I am a very old programmer who learned the craft while dodging dinosaurs back in the stone age. I think people freshly learning to program today have a considerably different perspective (and probably vastly better). Sometimes I just have to go read the code. I had a devil of a time getting the jquery stuff to actually work. These notes maybe will help me the next time I have to do it.

What does the jquery support in Zend Framework mean? As I see it what you get is:
a) some new Zend Form elements, which make use of the jquery library (like datepicker, colorpicker, slider)
b) a “view helper” (a phrase that doesn’t seem to convey much intrinsic meaning to me…). Basically a class available within the view which lets you manipulate jquery related stuff.
Essential to remember in all this is that we are doing php manipulations which ultimately result in various bits of javascript getting injected into the ultimate output page.

The place where all the javascript related stuff finally happens to the generated html is when the php class $this->jQuery() (actually referring to a jquery container object) is invoked in the layout. By this time various invocations of ZendX library code have taken place, which have noted that jQuery based form elements have been used, or that manipulations of the jquery helper have taken place. When $this->jQuery() is invoked in the layout, the php code dumps into the generated html the appropriate “<script type=’text/javascript’>” tags to load the jquery libraries, to set up appropriate javascript load events, to attach javascript handlers to html elements, etc.

This happens when, within the Zend/PHP space, one gets to the point in the layout where we are generating the <head> tags, and one puts in, basically: echo $this->jQuery();

If you have made any use of ZendX Form elements, doing this will cause the PHP code to dump in script tags to cause jquery to get loaded. If you haven’t used any such elements, then the ZendX php decides that jquery need not be enable, that nothing is needed, and the echo will return nothing, and nothing goes into the generated html. You can force it to still generate the scripts for the jquery library if you want. Suppose you have some javascript of your own that needs jquery, for example to traverse all the elements of a certain class. If you want to force it to generate the script tags to load the jquery library, even though you haven’t used any of the ZendX features that require jQuery, then you can change the above to: echo $this->jQuery()->enable(); This tells the ZendX library that you want it to enable jquery functionality, just as it would do if you included ZendX_Jquery form elements. Then the return will provide the script tags to load jquery.

One of the things different about using the ZendX library to get the jquery stuff loaded is that it will generate script tags to load the jquery (and jquery_ui) libraries from a CDN. You can alternatively force the use of a local downloaded source for either of the libraries by using $this->jQuery()->setLocalPath() and $this->jQuery()->setLocalUIPath(); If you use the CDN, then you don’t have to download the javascript libraries yourself and put them into one of your directories. At least that is the theory. I have an anomaly which I cannot explain about this. When I use the goggle provided CDN versions of the UI library (when I’m for example doing datepicker), I get a problem with the generated jquery_UI datapicker not being visible, owing to inclusion of a class that requires it to be hidden. If I manually remove this class spec (e.g. with firebug), it works. When I force the use of the local library (…setLocalUIPath()) it works. So at the moment I am leaving the local path forced. I haven’t figured this out. I’d rather use the google CDN versions, but haven’t figured out what is causing them not to work. Till I do, I’ll use the locally downloaded versions.