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.
jQuery Overview
FreeProvides a high-level overview of jQuery to people who are brand new to this JavaScript library.
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));
Goes over the Macro Maker demonstration module in order to show what functionality we will be building over the next couple of chapters.
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 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 the steps involved in converting a regular table into a table that is sortable by columns that you specify.
A review of the Form API properties that provide interactive user interface elements by automatically adding JavaScript behaviors to the form elements.
Goes through how to implement the AHAH framework in Drupal 6 in order to provide more dynamic interactions on a Drupal form.
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.
Create dependencies between form elements so that you can show/hide or disable/enable one form setting based upon the form state of another from setting.
Go on a brief tour of other jQuery and JavaScript-related contributed modules that are worth knowing about.
A review of all of the material covered within the jQuery & JavaScript in Drupal series.
JavaScript in Drupal
TopicJavaScript files are included by a module or a theme by creating an asset library. Using this asset library system you can selectively choose which files to load, overwrite existing files, or customize them to suit your needs.
Layouts
TopicA layout can describe how various components are arranged on various levels—from an entire page from the header to the footer, to just the “middle” where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.
Content Types
TopicA content type is a subtype of the [content entity](link to Entity topic). When a content creator goes to add new content to the site, they are presented with a list of content types to choose from to get the appropriate form to fill out.
Views Module in Drupal
TopicLearn to use data from your Drupal site to create customized lists in various forms, such as bulleted lists, grids, calendars, or sliders.
Standardized documentation is crucial to a project, whether it is just you or an entire team working on it. In this tutorial we're going to look at:
- Standards for
@docblockcomments - Standards for inline comments
- Why standards for documentation and comments are as important as standards for the rest of your code.
By the end of this tutorial you'll know how to add inline documentation for all the PHP code that you write for Drupal.
Formatting standards cover things like the use of whitespace, how to format control structures, and other aspects that affect your code's appearance and format.
In this tutorial we’ll talk specifically about standards regarding formatting. This is by no means an exhaustive list of PHP syntax rules, but rather is focused on formatting standards for Drupal.
By the end of this tutorial you'll know about the most common Drupal code formatting standards as well as where to find more information when questions arise.