How to add jQuery code only to the node add/edit page?

Question

I'd like to execute some jQuery code on a particular element in the node add/edit page of a particular content type. Currently I do that by putting

$(document).ready(function() {
    if (window.location.href.indexOf("node/add/CONTENT_TYPE") > -1) {
        ACTION;
    }
});

in the theme's .js file. It works, but I think the approach is probably not appropriate, as the test unnecessarily runs everywhere.

Could you please suggest an appropriate way?

Answer 1

First, you need to convert your script to be a behavior. Drupal will call defined behaviors, so document ready is not necessary.

Second, you can add this script to specific form pages with drupal_add_js and hook_form_alter.

1. Use hook_form_alter to hook into node add and node edit forms. You can do a check on the $form_id argument to ensure it is a node form.
2. Use drupal_add_js to add your script file.

Example:

function mymodule_form_alter(&$form, $form_state, $form_id) {
  if (preg_match('/node_form/i', $form_id) {
    drupal_add_js(drupal_get_path('module', 'my_module') . '/script.js');
  }
}

This file will only load when these forms are built, so, you can also remove the line that is checking the window href in the javascript.

The code above is untested, but a general start in the right direction. This code can be placed in a custom module, or, if your admin uses the same theme, you can place it in the template.php of the theme. I strongly recommend a simple custom module.

Edit

I believe the form id is preprended by the content type in 6. So, to isolate it to one content type:

function mymodule_form_alter(&$form, $form_state, $form_id) {
  if ($form_id == 'content_type_node_form') {
    drupal_add_js(drupal_get_path('module', 'my_module') . '/script.js');
  }
}

Or you can use hook_form_FORM_ID_alter to target specific forms too:

function mymodule_form_content_type_form_alter(&$form, $form_state, $form_id) {
  drupal_add_js(drupal_get_path('module', 'my_module') . '/script.js');
}

Where content_type is the name of any given content type (article, page, etc).

Example behavior (mymodule/script.js):

(function ($) {
  // you can define multiple behaviors

  Drupal.behaviors.mymodule_behaviorname_one = function(context) {
    // this code should fire automatically when the page has loaded
    console.log('Hello!');
    alert('Hello!');

    // attaching to an element
    $("a", context).click(function(e) {
      e.preventDefault();
      alert('You clicked a link.');
    }
  }

  Drupal.behaviors.mymodule_behaviorname_two = function(context) {
    // this code should fire automatically when the page has loaded
    console.log('Behavior 2');
  }
}(jQuery));

More on JS in Drupal (there are some examples in here for 6.x): https://www.drupal.org/docs/7/theming/working-with-javascript-and-jquery