Drupal 6 jQuery in Under 5 Minutes
It’s simple, really. There’re three major things you need to master with jQuery:
1. Properly Initializing your script on document load
Avoid using $(document).ready() as described in jQuery documentation! Instead try to use Drupal.behaviours. Example:
Drupal.behaviors.modulename_subidentifier = function(context) {
$(".someclass", context).click(function(e) {
e.preventDefault();
//... some really cool code here
return false;
});
}Attention: Drupal.behaviors is not simply a replacement for $(document).ready(), since the latter only runs once: when DOM is ready for manipulation, whereas behaviors can be fired multiple times during page execution. Behaviors can be run whenever new DOM elements are inserted into the document.
To write, proper jQuery code in Drupal we need to:
- Make sure we always include the second, “context” parameter in the jQuery selector expressions, unless it does not make sense. Sounds complicated? Well, usually in cases when selectors are used for “checking” something (number of elements in a specific list?) rather than manipulations, you want selectors to legitimately match entire document, in which case you would not pass context. Most of the time you do need to include context parameter, though. This is what Martin’s comment, below, was pointing out, too.
- If your Javascript code modifies DOM, let other behaviors know about it by firing:
Drupal.attachBehaviors(context);so that they can react if they need to.
2. Properly passing variables to javascript
You need to use Drupal.settings for this.
In php code:
$js_variables = array(
'first_var' => $someobj->param,
'second_var' => 24234+13123-12312+123123,
'third_var' => $something_else
);
drupal_add_js(array('modulename' => $js_variables), "setting");After which these variables can be accessed from Javascript code as follows:
var iamhappy = Drupal.settings.modulename.first_var;
var iamhappy_too = Drupal.settings.modulename.second_var;
// etc..3. String localization with Drupal
Now this one is super easy!
var something = Drupal.t('This string will be properly translated using Drupal translation interface');It can even be parametrized!
var params = {
“@firstvar”: “rendered in italic due to the @ prefix”,
“!secondvar”: “rendered verbatim w/o HTML stripping due to ! prefix”,
“%thirdvar”: “rendered with HTML stripped (safe)”
};
var txt = Drupal.t(“Don’t have to use all of them !secondvar %thirdvar.”, params);
P.S. Drupal.js also provides some theming abilities, but diving into those would have made the blog-post longer than what you can read in the promised 5 minutes. We will try to address that side of Drupal Javascript in a separate blog post.
Comments
In script initialization you
In script initialization you should pass context to jQuery function, to prevent initalizing some elements twice, because behaviour function runs also on AHAH updates.
Drupal.behaviors.modulename_subidentifier = function(context) {$(".someclass", context).click(function(e) {
}); }
In time of first initialization is context whole document.
Updated
Thank you, Martin. Good catch. I updated the code/blog post to incorporate clarification of this point.
Post new comment