Shows how you can use the ajax framework in Drupal 7 to load additional content onto the page dynamically after clicking on a 'read more' link.

The sample code for this series is in the Downloads tab for the first video in this series: http://drupalize.me/videos/introduction-jquery-and-javascript-drupal#do…. If you're skipping around, and things aren't working, you may benefit from going back to the beginning and completing each of the videos in order.

See how the new JavaScript APIs and ajax framework in Drupal 7 allows you to implement dynamic behaviors without having to register a menu callback in the menu system or to write any jQuery code.

Goes through how to implement the AHAH framework in Drupal 6 in order to provide more dynamic interactions on a Drupal form.

A review of the Form API properties that provide interactive user interface elements by automatically adding JavaScript behaviors to the form elements.

Shows the steps involved in converting a regular table into a table that is sortable by columns that you specify.

Goes into depth about some of the JavaScript constructs and tools that Drupal provides when writing JavaScript for Drupal. Topics include using Drupal.behaviors and variable settings.

There where a couple of changes to the Drupal.behaviors system for D7. You can find out more information about the changes here: http://drupal.org/update/modules/6/7#drupal_behaviors

And more general information about using the new system here http://drupal.org/node/756722

Once you've converted from the old Drupal.behaviors.myModule = function(context) to the new syntax

Drupal.behaviors.myModule = {
attach: function(context, settings),
detach: function(context, settings)
}

The rest is pretty much the same.

Shows how to pass variables from the PHP and Drupal side over to the front-end JavaScript scripts that are running so that you can use the Drupal interface to create customized settings that will appear in your jQuery scripts.

Goes over the Macro Maker demonstration module in order to show what functionality we will be building over the next couple of chapters.

This lesson shows the steps and code to add on the Drupal side in order to load JavaScript scripts to you site. One thing to note is that the HTML5 placeholder attribute makes this plugin invalid markup.

NOTE:
There is a minor change between Drupal 6 and Drupal 7, where you should use function($) to wrap your code. For Drupal 7 you can use:


(function($) {
$(document).ready(function() {
$('#search input.form-text').autofill({
value: Drupal.t('Search...'),
});
});
}(jQuery));


Provides a high-level overview of jQuery to people who are brand new to this JavaScript library.

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.

A brief summary of the material covered in the Introduction to jQuery video series

Use the jQuery plugin system to extend the set of methods available in jQuery beyond those provided by the core jQuery library. See where to find jQuery plugins, and examine a number of the available plugins and when to use them and what to use them for. See how to make use of plugins in your custom jQuery code. Finally, learn how to write your own plugins to extend the basic jQuery functionality.

AJAX is one of the main reasons to use a Javascript library such as jQuery. See how simple it is to perform a previously difficult task that required complex browser specific code to preform reliably and was prone to simple mistakes. Implement basic AJAX requests using jQuery's built in methods which make it extremely simple to send an asynchronous request to a server, gather the returned data, and insert it into the page.

Example code:

// AJAX Live Function
$('.content p').live('mouseenter mouseleave',
  function() {
    $(this).toggleClass('hilight');
  }
);

// AJAX Example
$('.node_read_more a').click(function() {
  var url = $(this).attr('href');
  var link = this;

  $.ajax({
    url: url,
    success: function(data) {
      var $fullContent = $('#content-output .content', data);
      var html = $fullContent.html();
      $(link).closest('div.node').find('div.content').html(html);
      $(link).hide();
    }
  });
  return false;
});

Traverse the DOM tree using jQuery to find the children, parents, and other nearby elements of any selected element on the page. Learn how to select an element up the page and reliably locate it's siblings by traversing up the DOM to a parent element and then back down using find. Use additional jQuery methods to filter a list of DOM elements down using find to apply an additional selector to the list, not to filter out elements that do not match a set of criteria and more.

Use jQuery to manipulate DOM elements including adding and removing classes to an HTML element, changing the content of an element, wrap a set of elements with a new element, adding new elements to the page using prepend and append methods and the related prependTo and appendTo methods. Use jQuery to manipulate properties height, width, and position of any DOM element. Finally learn how to use jQuery to completely remove selected DOM elements from the page.

Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.

Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.

(function($){
  $(document).ready(function(){
    
    $('#sidebar .block .content').hide();
    $('#sidebar .block h3').css('cursor', 'pointer').click(function(){
      $(this).parent().children('.content').slideToggle();
    });

  });
})(jQuery);

Learn how to respond to the actions that a user performs on a page using jQuery events. Attach event handlers to DOM elements and respond to mouse events like click and hover, and keyboard events such as someone pressing or releasing a key. Finally learn about responding to special events that only occur on form elements. This chapter gives a description of each of the available jQuery events and how or when they are triggered. Check out http://quirksmode.org/js/keys.html for more information on compatibility for assigning keyboard events across multiple browsers.

Learn about using jQuery to apply animation and effects to DOM elements. Show and hide things on the page using the fade, slide, and hide/show methods. Chain multiple effects together to create animations. And use the jQuery .animate() function to preform more complex animations.