Drupal 6 JavaScript and jQuery

Drupal 6 JavaScript and jQuery
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 25%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Learn about JavaScript support in Drupal 6
  • Packed with example code ready for you to use
  • Harness the popular jQuery library to enhance your Drupal sites
  • Make the most of Drupal's built-in JavaScript libraries

Book Details

Language : English
Paperback : 340 pages [ 235mm x 191mm ]
Release Date : March 2009
ISBN : 1847196160
ISBN 13 : 9781847196163
Author(s) : Matt Butcher
Topics and Technologies : All Books, CMS and eCommerce, AJAX, Content Management (CMS), Drupal, jQuery, Open Source

Table of Contents

Chapter 1: Drupal and JavaScript
Chapter 2: Working with JavaScript in Drupal
Chapter 3: jQuery: Do More with Drupal
Chapter 4: Drupal Behaviors
Chapter 5: Lost in Translations
Chapter 6: JavaScript Theming
Chapter 7: AJAX and Drupal Web Services
Chapter 8: Building a Module
Chapter 9: Integrating and Extending
  • Chapter 1: Drupal and JavaScript
    • Do you speak...?
      • PHP
      • SQL
      • HTML
      • CSS
      • XML
      • JavaScript
    • Drupal's architecture
      • The Drupal Core
      • The Theme Engine
      • Modules
    • Users, nodes, and blocks
      • Users
      • Blocks
      • Nodes
    • Drupal JavaScript development tools
      • A good editor
      • Firebug
      • The Drupal Devel package
    • Summary
  • Chapter 2: Working with JavaScript in Drupal
    • How Drupal handles JavaScript
      • Where Drupal JavaScript comes from?
    • Project overview: printer-friendly page content
    • The printer script
      • Drupal coding standards
        • Stylistic differences between PHP and JavaScript
      • The first lines
      • The print() function
    • Creating a theme
      • Full themes and subthemes
      • Creating a theme: first steps
        • Creating a theme directory
        • Creating the .info file
        • Adding files to the theme
      • The CSS file
      • Adding JavaScript to a theme
        • Overriding a template
        • Adding the script file
    • Summary
  • Chapter 3: jQuery: Do More with Drupal
    • jQuery: the write less, do more library
      • A first jQuery script
        • Getting jQuery
        • Starting with a basic HTML document
        • Querying with jQuery (and the Firebug console)
        • Bye bye, jQuery(); hello $()
        • Doing more with jQuery
    • Using jQuery in Drupal
      • Don't do it yourself!
    • Project: rotating sticky node teasers
      • The StickyRotate functions
        • The init() function
        • The periodicRefresh() function
        • Adding an event handler with jQuery
    • A brief look backward
    • Summary
  • Chapter 4: Drupal Behaviors
    • The drupal.js library
    • Drupal JavaScript behaviors
      • Defining a behavior to handle repeatable events
      • Telling Drupal to attach behaviors
        • Context and behaviors: bug potential
    • Project: collapsing blocks
    • Utilities
      • Checking capabilities with Drupal.jsEnabled
      • The Drupal.checkPlain() function (and the jQuery alternative)
      • The Drupal.parseJson() function
      • The Drupal.encodeURIComponent() function
      • The Drupal.getSelection() function
    • Project: a simple text editor
      • The main behavior
        • Step 1: find text areas that need processing
        • Step 2: add event handlers
        • Step 3: attach the button bar
    • Summary
  • Chapter 5: Lost in Translations
    • Translations and drupal.js
    • Translation and languages
      • Turning on translation support
      • Getting and installing translations
      • Configuring languages
        • Adding the language
        • Configuring languages
    • Using the translation functions
      • The Drupal.t() function
      • The Drupal.formatPlural() function
    • Adding a translated string
    • Project: weekend countdown
      • Translating the project's strings
      • Changing a translation file
    • Summary
  • Chapter 6: JavaScript Theming
    • Theming in PHP, theming in JavaScript
    • The Drupal.theme() function
    • Project: menus and blocks
      • Adding a block with a menu in it
      • Theming a block
      • Theming a menu
    • The JavaScript theming module
      • Theming tables
      • Sending notifications to the user
      • Adding links
    • Project: templates for JavaScript
      • The node template
      • From a template to a system: what next?
      • A template system
      • Theming with templates
      • Using the template system
      • A word of warning
    • Summary
  • Chapter 7: AJAX and Drupal Web Services
    • AJAX, JSON, XHR, AHAH, and Web 2.0
      • Web application and Web 2.0
        • The position of AJAX in Web 2.0
      • Getting technical
      • Move over, XML
    • Project: web clips with RSS and AJAX
      • Really Simple Syndication (RSS)
      • The project goals
      • Creating the web clips tool
        • The WebClips behavior
        • The WebClips.showItem() function
    • Project: real-time comment notifications
      • Displaying comments as notifications
      • Installing Views and Views Datasource
      • Creating a JSON view
      • The comment watcher
        • The comment watcher behavior
        • The CommentWatcher.check() function
        • Theming the comment notification
        • Managing cookies
    • Summary
  • Chapter 8: Building a Module
    • How modules work
      • The module structure
        • The directory
        • The .info file
        • The .module file
        • Where do modules go?
    • Project: creating a JavaScript loader module
      • Creating the module directory
      • A JavaScript sample
      • The module's .info file
        • A custom addition
      • The .module file
        • The jsloader_help() function
        • The jsloader_init() function
    • Project: the editor revisited
      • First step: creating the module
      • The CSS file
      • The bettereditor.module file
      • The bettereditor.js script
        • The editor() behavior
        • The insertTag() function
        • The addTag() theme
        • The button() theme function
        • The buttonBar() theme function
      • A last question
    • Summary
  • Chapter 9: Integrating and Extending
    • Project: autocompletion and search
      • The theory
      • Our plan
      • First step: creating the taxonomy
      • The new module
      • The search autocomplete JavaScript
    • Project: jQuery UI
      • What is jQuery UI?
      • Getting jQuery UI
      • The accordion module
      • The .info and .module files
      • The accordion JavaScript
    • Project: writing a jQuery plug-in
      • The plug-in code
        • A brief introduction to closures
        • The divWrap() function
    • Summary

Matt Butcher

Matt is a web developer and author. He has previously written five other books for Packt, including two others on Drupal. He is a senior developer for the New York Times Company, where he works on ConsumerSearch.com, one of the most traffic-heavy Drupal sites in the world. He is the maintainer of multiple Drupal modules and also heads QueryPath – a jQuery-like PHP library. He blogs occasionally athttp://technosophos.com.


Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 9 submitted: last submission 10 Sep 2012

Errata type: Typo | Page number: 10

First line, "you're" should be "your".

Errata type: Code | Page number: 33

In the printer_tool.js code, '</title><body>' + should be '</title></head><body>' +

Errata type: Typo | Page number: 43

In the middle of the page the first word "W've" should be "We've".

Errata Type:Code Page no:102

The project uses .children(".title") however, if the theme has more than one level of

(like Zen) then this function will not find "title" in the second level. Use .find(".title") instead so that jQuery will search all levels within the block.


Errata Type:typo Page no:96 - 107

There is only the code from the first tiny project and the last big Chap 4. project and no code (or full display or explanation, anywhere) for calling Drupal.attachBehaviors() for the 2 projects between pp. 96 - 107

Errata Type:typo Page no:102

The project uses .children(".title") however, if the theme has more than one level of

(like Zen) then this function will not find "title" in the second level. Use .find(".title") instead so that jQuery will search all levels within the block.


Errata Type:typo Page no:53

The number 5 appears just before the opening tag in the page.tpl.php code. It doesn't belong there and is not part of the downloadable code.

Errata Type:typo Page no:148

Translation file, frobnitz.es.po, is not in synch with the the JavaScript file, day.js. The code for the script contains a plurals entry containing 'is 1 day' and 'are @count days'. Unfortunately, the translation file shown in text and given in the downloadable code uses the two expressions for translation minus the verb, i.e. '1 day' and '@count days'.

Errata Type:typo Page no:166

Last sentence on page. Should be either '... will be called ...' or '... will get called ...', definitely not '... will be get called ...'.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Drupal 6 JavaScript and jQuery +    Openswan: Building and Integrating Virtual Private Networks =
50% Off
the second eBook
Price for both: $42.60

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • An introduction to JavaScript in Drupal 6
  • The basics of the jQuery library
  • Creating JavaScript-enabled themes
  • Manipulating a page on the fly with jQuery
  • Authoring simple PHPTemplate files designed to maximize scripting potential
  • Using jQuery to add effects in Drupal 6
  • Working with Drupal 6 behaviors
  • Adding AJAX to modules
  • Using Drupal's localization and language translation engine in your JavaScript
  • Theming on the client-side with Drupal's JavaScript theme engine
  • Building better forms
  • Working with Drupal 6's JavaScript library
  • Writing portable JavaScript tools as Drupal modules

In Detail

JavaScript: It's not just for calculators and image rollovers.

Drupal 6 is loaded with new features, and not all of them are necessarily implemented in PHP. This unique book, for web designers and developers, will take you through what can be done with JavaScript (and especially with jQuery) in Drupal 6.

With the combination of the powerhouse jQuery library with its own robust set of JavaScript tools, Drupal 6 comes with a pre-packaged killer JavaScript environment. Cross-platform by nature, it provides all of the tools necessary to create powerful AJAX-enabled scripts, gorgeous visual effects, and view-enhancing behaviors. In addition, Drupal developers have ported some of its most powerful PHP tools – like a theming engine and support for localization and language translation – to JavaScript, making it possible to write simple scripts where once only complex PHP code could be used.

This book gives you the keys to the toolbox, showing you how to use Drupal's JavaScript libraries to make your modules and themes more dynamic, interactive and responsive, and add effects to make your Drupal site explode into life!

If you've dipped your toe in the water of theme or module development with Drupal 6, this is the book you want to make the look and behavior of your work something special. With it's project-based approach, this book is carefully constructed to guide you from how JavaScript fits into the overall Drupal architecture through to making you a master of the jQuery library in the world of Drupal themes and modules.

This book fills the gap between Drupal 6 modules and theming by showing you how to make use of JavaScript and jQuery to join up server-side modules with your front-end designs. 


This book focuses on teaching by example. Chapters are packed with example code, providing hands-on examples you can play with and then release to your own Drupal sites. By introducing short projects interspersed with discussion, the pace is rapid yet practical.

Who this book is for

This book is for web designers and developers who want to add JavaScript elements to Drupal themes or modules to create more flexible and responsive user interfaces.

You are expected to know about the basic operation of Drupal, and be familiar with the concept of theming and modules in Drupal. No experience of creating themes or modules is required.

You will need to know the basics of client-side web development; this means HTML, CSS, but also have a rudimentary grasp of the syntax of JavaScript. Familiarity with PHP programming will be an advantage, since we will be writing PHPTemplate files and (at the end) creating Drupal modules. However, the PHP is covered thoroughly enough that even the PHP neophyte will not find the text too demanding. The book also covers the jQuery JavaScript library and its use in Drupal, but no knowledge of jQuery is expected - you will learn everything you need in this book.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software