Introduction to Jquery @ Drupalcon Szeged2008

Jquery in Drupal 5.x

This is a small introduction on how to use jquery in the Drupal website system (and framework :) ) . It gives only small cheatsheet examples on how to implement the code snippets in drupal.  My favorite drupal javascript feature (core in drupal6) is AHAH where you can add javascript directly through php.

Important and handy functions on the php-side

Underneath you see how to add a javascript file in Drupal.

function drupal_add_js($data = NULL, $type = ‘module’, $scope = ‘header’, $defer = FALSE, $cache = TRUE, $preprocess = TRUE){ }

You can add js files from module, core or theme (example 1). You can place inline javascript immediately into the current page with the inline command (example 3). Exampmle 2 shows how you add settings to the global javascript settings as some modules require their declaration. Parameters can be data, type, scope, defer, cache and preprocess.

  1. drupal_add_js(drupal_get_path(‘module’,‘mymodule’).‘/myjs.js’);
  2. drupal_add_js(array(‘myjs’=> $mysettings), ’setting’);
  3. drupal_add_js(‘var myVar = "foo";’, ‘inline’);

See drupal_add_js for more specific information on the parameters.

drupal_get_js() outputs the script tags to your page, makes a call to drupal_add_js() to get all the javascript tghat have been stored in the static $javascript variable

drupal_to_js() converts a PHP variable into its Javascript equivalent.

Drupal.js
  • drupal.js provies support for most common javascript tasks in drupal
  • adds the javascript class to the html element
  • initializes the drupal javascript object which you access by “Drupal”.
Drupal.settings

This file takes the php-information and passes it to javascript. Use hook_init and hook_settings to add your settings javascript and to add your javascript files needed.
For example if you have set effects settings in your module, then in your added js-files you could do:

  1. switch(Drupal.settings.yourmodule.effect) {
  2.   // your cases
  3.   case ‘none’:
  4.   break;
  5.   case ‘fade’:
  6.   break;
  7. }
  8. This way you hook your behavior or effect from your module to javascript.
  1. Drupal.behaviours.myBehaviour = function(context) {
  2.   $(‘.my-class:not(.myBehaviour-processes)’);
  3. }

This function is then called when the DOM has loaded:

  1. Drupal.attachBehaviours = function (context) {
  2.   context = context || document;
  3.   if(Drupal.jsEnabled) {
  4.     // execute them all
  5.     jQuery.each(Drupal.behaviours, function() {
  6.       this(context);
  7.     });
  8.   }
  9. };
Drupal.theme

The js counterpart to the server-side theme function. Call Drupal.theme(”myFunction’, ‘my_first_arg’, ‘my_second_arg’);
your theme function must be a prototype object of Drupal.theme, e.g. Drupal.theme.prototype.myFunction = function (args) { …}

Drupal.locale

In conjunction with drupal.t, the js equivalent of the server-side t function holds a collection of string translations and functiones equivalent with the php function t.
Drupal.t can then access the required js string translations. The jQuery update module handles versions and interface needed in your Drupal installation.

Then Drupal upgraded core jQuery to version 1.1.3, included a compat.js file for backwards compatibility …

!! jQuery Update for D6: no file replacement necessary (for D5 it need 4 files to upgrade/update ).

In stead of TinyMCE , use WYSIWYG editor module in stead.

Pages: 1 2 3

This entry was posted on Saturday, September 6th, 2008 at 12:26 pm and is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Introduction to Jquery @ Drupalcon Szeged2008”

  1. Stalski Says:
    November 25th, 2008 at 5:39 pm

    Other effects:
    slideUp(), slideDown(), slideToggle(), fadeIn(), fadeOut()

Leave a Reply