By webadpro on

Hello,

I'm not too sure how drupal.behaviors are working. Is there a good place where I could actually learn how its actually working and how can I get it working the right way in my custom modules.

Also, this might sound stupid but can I bind a behaviors to a button which has ahah on it?
And is it Drupal.behaviors.hook_name? Im very new to behaviors so any tutorials would be greatly appreciated.

Warm regards,
Pat

⋅ Categories: Drupal 6.x

Comments

scrypter’s picture

scrypter commented

Search for "drupal.behaviours', there are 10.5 million matches, the first page looks to have some good info!

www.purpleoar.co.nz/scryptik - Javascript editor with syntax error checking
www.purpleoar.co.nz - Web development, Drupal consultancy

jaypan’s picture

jaypan
Location Victoria, BC
commented

Drupal.behaviors is essentially an onload function. You put any onload queries you have into it. If does checks to make sure the browser has the right capabilities, and if it does, it will execute your commands when the DOM has loaded.

It is usually namespaced by your module name. For example:

Drupal.behaviors.myModule = function()
{
  alert('The DOM has loaded');
}

Contact me to contract me for D7 -> D10/11 migrations.

stuarteske’s picture

stuarteske commented

There is a book for drupal 6 covering the subject.

Title : Drupal 6 JavaScript and JQuery
ISBN : 978-847196-16-3

I find a well written book is far better than several Google searched pages.

webadpro’s picture

webadpro commented

Thanks everyone.

Its simply because I often see prototype in the js too, and Id like to understand that part.

webadpro’s picture

webadpro commented

Can I attach a js to be executed only on a certain page?

Lets say I have a form where I want to execute a certain js on that form only. How would I do this?

If anyone could help.

Thanks

jaypan’s picture

jaypan
Location Victoria, BC
commented

There are various ways you can do it, but the way I do it is to add a themeing function and put the JS in there.

So for example, if I have the following form definition:

function mymodule_myform($form_state)
{
  // form definition goes here
}

Then I would register a theme in hook theme as follows:

function mymodule_theme()
{
  return array
  (
    'mymodule_myform' => array // this needs to be the same name as your form, with any hyphens converted to underscores
    (
      'arguments' => array('form' => NULL), // form themes take this one and only argument
    ),
  );
}
Then add the javascript in the theme function as follows:
<?php
function theme_mymodule_myform($form)
{
  $path = drupal_get_path('module', 'mymodule');
  drupal_add_js($path . '/jsfile.js');
  return drupal_render($form); // this step is required
}

And that will add your JS to your pages.

Contact me to contract me for D7 -> D10/11 migrations.

webadpro’s picture

webadpro commented

Hi,

Thanks for the example and that's what I've been doing all along, although I was wondering from my JS file is there a way to tell to check if some function are for a certain form!?

Exemple:


mymodule.module:

function mymodule_form1(&$node, $form_state) {
	drupal_add_js(drupal_get_path('module', 'mymodule') .'/mymodule.js');
	jquery_ui_add(array('jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.sortable')); 
       // form definition goes here

}

function mymodule_form2(&$node, $form_state) {
         drupal_add_js(drupal_get_path('module', 'mymodule') .'/mymodule.js');
	 // form definition goes here
}

mymodule.js:

Drupal.behaviors.mymodule = function (context) {
  //Form1
  $("#mytop10_table tbody").disableSelection();
  $("#mytop10_table tbody").sortable();

  //Form2
  //Do some other stuff

}

As you can see in Form2 I don't include any jquery.ui files so I get a JS error when viewing it. So I was wonderinf if in JS file if there was a built-in function to attach a form or some sort?

Any help is greatly appreciated.

Thanks

jaypan’s picture

jaypan
Location Victoria, BC
commented

You can test if a function exists like this:

if(typeof yourFunctionName == 'function') {
yourFunctionName();
}

Replace yourFunctionName with the actual function name (no quotes).

But really, I'd just create a separate javascript file for the other form. It will keep your code cleaner.

Contact me to contract me for D7 -> D10/11 migrations.

zilverdistel’s picture

zilverdistel commented

I was looking for the same information and found that this page (http://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupal-behaviors) was very enlightening.