Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Introduction to jQuery and JavaScript in Drupal

Video loading...

  • 0:07
    jQuery and JavaScript in Drupal Jeff Robbins & Nate Haug
  • 0:15
    Hi, and welcome to another video
  • 0:17
    in the Lullabot Learning Series.
  • 0:19
    In this video we're going to talk about jQuery and JavaScript usage
  • 0:23
    in Drupal.
  • 0:24
    I'm Jeff Robbins.
  • 0:26
    And I'm Nate Haug.
  • 0:28
    Let's take a look at some of the jQuery and Drupal integrations
  • 0:31
    that we'll be building today in this video.
  • 0:34
    The first thing we're going to be looking at
  • 0:35
    is how to add jQuery to a theme.
  • 0:38
    In this example, we'll be taking a custom theme
  • 0:41
    and then making it so that when you click in the search box,
  • 0:43
    the word search will automatically disappear and reappear if you
  • 0:47
    haven't entered in a search term.
  • 0:49
    This will involve adding a jQuery library to the page
  • 0:52
    and then doing a small bit of custom jQuery
  • 0:54
    and adding it to the theme to add this functionality to the search box.
  • 0:59
    We're then going to take a look at some module development.
  • 1:04
    We'll put together a module called Macro Maker Module that simply
  • 1:08
    allows, when you type into any text area or text field,
  • 1:11
    it will pop up a Macros popup that allows
  • 1:14
    you to select macros that you may enter into a particular text field.
  • 1:18
    Automatically, upon clicking a macro,
  • 1:20
    it'll insert it into that text field.
  • 1:25
    In the administrative interface of the Macro Maker Module,
  • 1:28
    we're going to take a look at how to utilize Drupal's drag and drop
  • 1:31
    behavior to make it so you can easily reorder elements on a page
  • 1:35
    within any form that has orderable items.
  • 1:39
    We're also going to take a look at Drupal's direct integration
  • 1:42
    with jQuery through the Forms API.
  • 1:45
    We're going to look at some of the simple properties,
  • 1:47
    such as Auto Complete or Collapsible or Resizable
  • 1:51
    as well as some of the more advanced properties such as the ahah
  • 1:54
    property available in Drupal 6.
  • 1:57
    The ahah property allows you to make AJAX- or ahah-based requests
  • 2:02
    in reaction to any user-related event on the page,
  • 2:05
    such as filling out a username and automatically
  • 2:08
    doing an AJAX request to validate whether or not
  • 2:11
    that username is available.
  • 2:14
    Then, after we get done looking at the Drupal 6 AHAH framework,
  • 2:17
    we're going to shift gears and move to Drupal 7
  • 2:20
    and talk about changes in the AHAH framework,
  • 2:22
    now renamed as the AJAX framework, and then continue on
  • 2:26
    with other Drupal 7 functionality.
  • 2:29
    We're going to take a look at how the AJAX framework has been
  • 2:32
    enhanced in Drupal 7 to make it so that it can
  • 2:34
    work on not just form elements, but on regular links
  • 2:37
    throughout the site.
  • 2:38
    In this example that we'll be building,
  • 2:40
    we'll build a highly optimized AJAX request to Drupal that will return
  • 2:45
    a JSON result, making it so that we can quick view an individual node
  • 2:49
    from the teaser view.
  • 2:50
    When clicking Quick View, it'll do an AJAX request and return back
  • 2:54
    the AJAX string containing the full node version of an individual node,
  • 2:59
    and then return it back onto the same page that
  • 3:02
    the Quick View link was clicked on.
  • 3:05
    We're also going to be covering the new JavaScript state
  • 3:08
    system in Drupal 7, which allows you to form connections
  • 3:12
    between different elements on the page,
  • 3:14
    showing or hiding them or changing their state
  • 3:17
    based on certain properties.
  • 3:20
    Finally, we're going to look at an example module
  • 3:22
    that allows you to customize your unicorn
  • 3:25
    through this new state system.
  • 3:28
    We cover a lot of information in this video,
  • 3:30
    building on the foundations of themeing,
  • 3:32
    module development, and jQuery.
  • 3:35
    So we've got a lot of code to cover.
  • 3:37
    Let's dive in.

Introduction to Jquery and Javascript in Drupal


Learn how to integrate jQuery scripts into Drupal, and how to leverage the JavaScript capabilities of the Drupal API in both 6.x & 7.x

Jeff Robbins and Nate Haug introduce the jQuery and Drupal integrations that we'll be building in this series, based on the foundations of theming, module development, and jQuery.

  • How to add jQuery to a theme
  • How to utilize Drupal's drag and drop behavior to reorder elements on a page within any form that has orderable items
  • Drupal's direct integration with jQuery through the Forms API in Drupal 6 and Drupal 7
  • Building a highly optimized AJAX request to Drupal that will return a JSON result
  • The JavaScript state system in Drupal 7

Note: The examples in the video span across Drupal 6 and Drupal 7, and jQuery code that will work either in jQuery version 1.2.6 or 1.4.

Log in or sign up to download companion files.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.