So jquery’s $(document).ready() isn’t working for you in Drupal 6. Dont worry. It’s not an error on your part, and very easy to troubleshoot.
The reason for this behaviour is that $(document).ready() doesn’t exist in drupal. The reason for this is very simple. There can be only one document.ready function, and Drupal is already using it. Instead you must use Drupal’s built in hook to document.ready. So instead of this javascript:
1 2 3 | $(document).ready(function() { // put all your jQuery goodness in here. }); |
Use this Javascript in your Drupal template file (e.g. page.tpl.php):
1 2 3 | Drupal.behaviors.myModuleBehavior = function (context) { // put all your jQuery goodness in here. } |
myModuleBehavior just needs to be a unique name, and is right off the top of my head.
Of course this doesn’t accept any variables (context is a fixed Drupal variable and cannot be changed), so add variables to it following this pattern via PHP code:
1 | drupal_add_js(array('myvariable' => 'test'), 'setting'); |
and access them as such in your Javascript:
1 2 3 | Drupal.behaviors.myModuleBehavior = function (context) { alert(Drupal.settings.myvariable); } |
Enjoy!
Shawn Peters
October 19, 2010 at 18:32
I am trying to complete your guide for Jquery UI (http://blog.houen.net/24/code/drupal-6-and-jquery-ui-complete-guide), but I’m having a hard time understanding where to place the above code, i.e. the “$(document).ready()”. Would this go in a custom js file and called using the theme’s .info file (scripts[] = js/script.js) or somewhere else? Great guide, but obviously all steps need to be followed for it to work…Thank you in advance!
Houen
October 19, 2010 at 20:58
Read the post I am linking to in the post about getting $(document).ready() working.
Houen
October 19, 2010 at 21:02
Whoops, misunderstood you. The “Drupal.behaviors.myModuleBehavior” I am referring to in the above is php code that needs to go in your .tpl.php files (e.g. page.tpl.php) and thus you write the javascript in the Drupal php template file
DenNYC
December 28, 2010 at 11:00
Hi, thx for you guide!!! very helpfull, was trying to configure jQuery UI and drupal 2 days – u saved me)
but i don’t really get this:
Use this php code in your Drupal template file (e.g. page.tpl.php
Drupal.behaviors.myModuleBehavior = function (context) {
// put all your jQuery goodness in here.
}
but when i put THAT code as php – drupal says error on line 17 in page.tpl.php file where the code starts…. when i putting it as javascript – no error, but it doesn’t work(
plz explain more detailed THAT 11th step:
Test your new jquery ui out:
- And add this line to your drupal-specific document.ready function:
$(“#datepicker”).datepicker();
so i am adding
Drupal.behaviors.myModuleBehavior = function (context) {
$(“#datepicker”).datepicker();
}
in page.tpl.php as php code? but it RESULTS in error on that line…
Houen
December 30, 2010 at 17:00
Thanks DenNYC – that was a typo. It should of course have been javascript. I fixed it in the post.
As for why it doesn’t work, I have no idea. I am currently using this code in a production website (in the page.tpl.php file):
(*SNIP*)
< ?php print $scripts; ?> <script type="text/javascript"> < ?php if($is_front): ?> Drupal.behaviors.myModuleBehavior = function (context) { position_elements(); change_style(false); changeimages(); //Init first image $("#image1").attr("src", "http://www.andtie.net/sites/default/files/bgimages/" + current_image + ".jpg"); imagetimer=setTimeout("timedTransition()",transitionTimer + 1000); //1000 to account for average load time } < ?php else: ?> Drupal.behaviors.myModuleBehavior = function (context) { position_elements(); change_style(false); changeimages(); } < ?php endif; ?> And the site is live at http://www.andtie.netDenNYC
January 5, 2011 at 02:00
thx, everything is working now, great tutuorial, many thx!
jhansi
July 26, 2011 at 06:41
thanks, its very helpful to me.