Drupal 6 + jQP + jQuery Plugins

I have been having some fun with jQuery lately and I truly love it. I write this article to log what I have put together for a project using Drupal and Ajax.

I work at MCIT of the University of Michigan Health System. I have been using Drupal as a platform for some in-house network management tools allowing our desktop support teams to help with supporting customers with some of their networking needs, such as moving a switch port to a different VLAN, changing the speed/duplex settings of a port, etc. Allowing direct customer facing support staff to perform those simple tasks simplifies the work flow and provides a better overall experience to the end user, yet enterprise network management tools such as Ciscoworks does not provide the level of granular control. By the way, is there anyone interested in a tool like this as a Drupal module? If so, I might get it cleaned up and open source it.

Anyway, the tool existed as a web application before I came along which was developed in PHP. I wanted to give it a more intuitive interface and better user experience. Drupal and Ajax are my choice of platform. As Drupal uses jQuery so naturally that becomes the choice of tool kit for building the user interface.

Drupal is a content management system (or CMS) with an active community around it. Documentation about installing and developing for Drupal can be found on their website and via Google. Everything else mentioned in this article needs a bit of work on your Drupal installation.

1. jQuery and jquery_update
   

   
   Drupal has had jQuery since version 5 something. However, the Drupal core does not come with the latest version of jQuery. That is where the jquery_update module comes in. Simply download the module for your version of Drupal. If you are using Drupal 6, all you need to do then is enable to module. With Drupal 5.x however, you would have to follow the instructions in a file in the module's directory to complete the jQuery update.



2. jQuery UI
   

   The jQuery UI plugin "provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications." More on the installation and use of jQuery UI later.



3. jQuery Grid
   

   The jQuery Grid plugin does exactly what the name says, but it does that really well! Again, more details later. But in the mean time, I strongly recommend the demos that the project author, Tony Tomov, has built on his site.



4. jquery-json

   "JSON plugin for jQuery, provides simple ways to convert to JSON and back again."



5. jQuery Plugin Handler (jQP)
   

   The jQP module is the glue that one can use to put the pieces listed above in 2, 3 and 4 into Drupal.

To allow a Drupal module to use jQuery plugins, the jQP module can help. Install the jQP module just like any other Drupal module, enable it, then add the jQuery plugins.

A jQuery plugin may be installed in a number of different locations. For simplicity sake, I install all my jQuery plugins in the .../sites/all/js_libraries/ folder. This folder is one of those the jQP module searches for JavaScript libraries.

For example, I download the jQuery Grid plugin and unpack it in the jqGrid subdirectory under the above mentioned .../js_libraries/ folder, each version in a different sub-folder. So version 3.4.4 is in .../js_libraries/jqGrid/3.4.4/, version 3.5 in .../js_libraries/jqGrid/3.5/, etc.

Then create a .../js_libraries/jqGrid/jquery.jqGrid.info file with the contents below:

name = jquery.jqGrid
description = Files from jQuery jqGrid plug-in.
project_url = http://www.trirand.com/blog

scripts[0][0] = 3.4.4/jquery.jqGrid.js
stylesheets[0][0] = 3.4.4/themes/basic/grid.css
stylesheets[0][1] = 3.4.4/themes/jqModal.css

scripts[3.4.4][0] = 3.4.4/jquery.jqGrid.js
stylesheets[3.4.4][0] = 3.4.4/themes/basic/grid.css
stylesheets[3.4.4][1] = 3.4.4/themes/jqModal.css

scripts[3.5][0] = 3.5/jquery.jqGrid.js
stylesheets[3.5][0] = 3.5/css/ui.jqgrid.css
stylesheets[3.5][1] = 3.5/css/jquery.searchFilter.css

The above .info file will show three entries in the Drupal Administer » Site building » Javascript libraries page:



Now, to use the default version of the jQuery Grid plug-in, add this line to the code:

 drupal_add_js_library('jquery.jqGrid');

Or add this line to use a particular version:

 drupal_add_js_library('jquery.jqGrid', '3.4.4');