By Zach Harkey on

I want to add a simple onload event to the body element. I only want the event on one page so I don't want to put it in my theme. Neither do I want to create a special module for it. I really just want to do something like this:

<?php

drupal_set_html_head('

<script type="text/javascript">

    //<![CDATA[

    function preloadImages() {

      whatev...

    }

    //]]>

    </script>');

drupal_set_onload('preloadImages()');

?>

Is there anything like this? or is it just a foregone conclusion that you will never have page-specific content that needs to add an onload event to the body?

Comments

Dublin Drupaller’s picture

Dublin Drupaller commented

Hi Zach,

Assume you've tried that in a PHP page (normal Drupal page with the PHP Code filter selected)...

You can have page-specific content/stuff, if you can work out something unique about the page you can use.

If you do a search for "arg(0)" or "arg(1)" or have a look at the $node->type variable...it might spark some ideas.

For example

<?php if ($node->type == 'blog'): /*if the node is a blog type */ ?>
<?php drupal_set_html_head('<script type="text/javascript">
    //<![CDATA[
    function preloadImages() {
      whatev...
    }
    //]]>
    </script>');
drupal_set_onload('preloadImages()');?>
<?php endif ;?>

hope that helps..

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

Zach Harkey’s picture

Zach Harkey commented

The problem is that there is no such thing as drupal_set_onload() function that can be called from within the page (node with php code filter) and I needed a way to ad an onload event to the body tag from within the php node itself.

But check this out. I was able to bypass the need to inject the onload event into the body tag altogether. Instead I set up a global event handler.

Here's the code to make it work:
NOT! Terminated request because of suspicious input data.

I can't get anything through this code filter. I've wrapped it in <code>tags and everything, but it doesn't work. I can't even publish the exact same lines of code that you used, Dub, how the hell are you doing it?

-zach
------------------------
harkey design

: z

Duplika’s picture

Duplika commented

If you are running 4.7, you can just use: drupal_call_js() to call for .js files only when the node is shown.
--
Duplika | Web Hosting

Steven’s picture

Steven commented

In Drupal 4.7 you can call addLoadEvent() from drupal.js. You should avoid onload="" because it will break other onload events.

--
If you have a problem, please search before posting a question.

Zach Harkey’s picture

Zach Harkey commented

Steven:

You should avoid>search before posting a question.

Is that the 1337 way of implying that I didn't do an exhaustive search before asking my question?

-zach
------------------------
harkey design

: z

patrickharris’s picture

patrickharris commented

And I've been searching javascript stuff for days.

puffbunny-1’s picture

puffbunny-1 commented

Ignore the elitist pig. He has no girlfriend.

Senpai’s picture

Senpai commented

Either he has no girlfriend, or that's a STANDARD SIGNATURE LINE for every post that Steven makes. One way or the other... ;)

Anyway, I've been reading this thread with renewed vigor ever since being tasked with creating a conference registration form on my Drupal site. Am I understanding that the addLoadEvent() function is already present within Drupal, and I just have to call it? If so, that's cool! The fact that my form's usability functionality doesn't work right now may be due to my lack of understanding re: Drupal and the drupal.js file.

If I were to call the function addLoadEvent() at the top of the node page that has the form on it, would that allow me to still use all of my own PHP to process the form, and only activate one part of the drupal.js file, or would using addLoadEvent() cause the entire drupal.js file to be included in the page?

****
Joel "Senpai" Farris | certified to rock score

patrickharris’s picture

patrickharris commented

If you are developing with javascript & Drupal, you might want to look at jQuery, which is included in core in the next Drupal release.

patrickharris’s picture

patrickharris commented

So I should addLoadEvent via a .js file, rather than adding javascript as onload to the body tag? What if I want the javascript to run before the page has completely loaded?

Zach Harkey’s picture

Zach Harkey commented

I'm not a javascript expert, but this is how I understand it. Someone please correct me if I'm wrong:

To run javascript before your page loads:
Put your Javascript code within the head of your page (outside of functions).

To run javascript as your page loads:
Put your Javascript code within the body of your web page (outside of functions) . It will load soon as the code is reached.

To run javascript after your page is finished loading:
Attach an event handler to the body tag itself.
Since we can't add onload events to the body tag (from within a node, i.e. php snippet), we can add a global event handler (window.onload) to the head with drupal_set_html_head — I think the problem with the first method is that it has the potential to over-ride previously assigned callbacks from other scripts — which is why it is probably a better idea to use the 4.7 addLoadEvent function from the new drupal.js.

Executing JavaScript on page load (Simon Willison explains addLoadEvent).

page events (great explanation of the order of execution).

-zach
------------------------
harkey design

: z

patrickharris’s picture

patrickharris commented

That's very useful.

EnekoAlonso-1’s picture

EnekoAlonso-1 commented

This works perfect for me:

<?php 
  drupal_set_html_head('<script type="text/javascript">
    window.onload = function() {
      MyOnLoad();
    }    
  </script>');
?>
EdinburghRob’s picture

EdinburghRob commented

This worked for me in Drupal 5.

Anywhere in the php code:
drupal_add_js('stuff.js');

In stuff.js:

if(Drupal.jsEnabled) {
  $(document).ready(function(){
    alert("Page loaded");
    });
}