Introduction to jQuery (for Drupal) Amit Asaravala “aasarava” on drupal.org

What is jQuery?

Magic

What is jQuery? A JavaScript library: Makes writing JavaScript a lot easier Makes writing cross-browser compatible JavaScript a lot easier Makes creating client-side interactivity a lot easier Makes AJAX a lot easier

How Do I Get jQuery?

For Drupal Sites: – D6  jQuery comes bundled – D7  jQuery comes bundled – Loaded automatically – Can use jquery_update module for newer vers. For Non-Drupal Sites: – – Get the “minified” version for production use

How Do I Use It?

How Do I Use It: Non-Drupal //your jquery code goes here. go crazy!

How Do I Use It: Drupal Theme Drupal 6: – Create a script.js file in your theme folder. – Your jQuery code goes in there. Drupal 7: – Edit your theme’s.info file – Add: scripts[] = script.js Reference:

How Do I Use It: Drupal Module 1.Create a mymodule.js file. 2.Use drupal_add_js() function in your module. mymodule_init() { $path = drupal_get_path(‘module’, ‘mymodule’); drupal_add_js($path. '/mymodule.js'); }

Yeah, But How Do I Use It?

Writing jQuery 1.Series of statements 2.Each statement is usually a 3-step process: 1.Select an element 2.Attach an event (optional) 3.Specify what happens “For this heading, when the user clicks on it, I want monkeys to fly across the page.”

3-Step Process 1.Select element: jQuery( ‘h2’ ) 2.Attach an event: jQuery( ‘h2’ ).click( ) 3.Specify what happens: jQuery( ‘h2’ ).click( monkeysFly );

Your Final Statement jQuery(‘h2’).click( monkeysFly );

$horthand $(‘h2’).click( monkeysFly ); see example

More Selectors $(‘input’).click( monkeysFly ); $(‘.title’).click( monkeysFly ); $(‘#form1 input’).click( monkeysFly ); $(‘#edit-title’).click( monkeysFly ); $(‘h2, h3,.title’).click( monkeysFly );

Monkey Code Inside script.js: $('h2').click( monkeysFly ); function monkeysFly() { $('img.monkey').fadeIn('slow'); }

Anonymous Functions $('h2').click( function() { $('img.monkey').fadeIn('slow'); } );

Anonymous Functions, 2 $('h2').click(function() { $('img.monkey').fadeIn('slow'); });

Wait ‘Til Browser is Ready $(document).ready(function() { $('h2').click(function() { $('img.monkey').fadeIn('slow'); });

D6: Wait ‘Til Browser is Ready Drupal.behaviors.demo = function(context) { $('h2‘, context).click(function() { $('img.monkey').fadeIn('slow'); }); };

D7: Wait ‘Til Browser is Ready Drupal.behaviors.demo = { attach: function(context, settings) { $('h2‘, context).click(function() { $('img.monkey').fadeIn('slow'); }); } };

Finding the Right jQuery Function Official: Handy:

Example: Dynamic Form Components Show character count as user is typing? No problem!

Example: Dynamic Form Components Let’s do this in a module countchars.module: function countchars_init() { $path = drupal_get_path(‘module’, ‘countchars’); drupal_add_js( $path. ‘/countchars.js’); }

Example: Dynamic Form Components countchars.js $(document).ready(function() { });

countchars.js $(document).ready(function() { $('#mytext').keyup( function() { });

countchars.js $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ); $('#mytext').keyup( function() { });

Chaining $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ).keyup( function() { });

countchars.js $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ).keyup(function() { var count = $('#mytext').val().length; $('#chars').html( 'characters: ' + count ); });

$(this) $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ).keyup(function() { var count = $(this).val().length; $('#chars').html( 'characters: ' + count ); });

Resources jquery.com -- main site jqueryui.com -- UI components Contact