Adding js to a drupal node form

Question

In Drupal you can create your own nodetype in a custom module. Doing this you get to create your own form which is all very nice.

However if you want to add js the form things get a bit more tricky. If you add the js in the form, the js will only be added form the form when it is loaded. If the user would post the form with validation errors, the form function is not run again and thus the js is not added. Normally you would just create a menu callback and add the js there, but for the node add form, this wont be a possible solution.

So what is the best solution for adding js in a node add form, to keep it persistant when the form doesn't validate?

The same on Drupal Answers: http://drupal.stackexchange.com/questions/70015/adding-css-and-js-to-form-with-attachments — Nux, Apr 22 '15 at 16:30

score 13 · Accepted Answer · edited Jan 28 '22 at 15:05

13

Trying some different hacks, I found a quite simple solution to this problem, create a theme function for the form and add the js there. That would look something like this:

function theme_content_type_node_form($form) {
  drupal_add_js(...);
  return theme('node_form', $form);
}

This just calls the default theme function for the node add form after adding the js. As the theme function is called even the form is cached, this works nicely. You also need to implement hook_theme to make this work.

Update for Drupal 7.

Drupal 7 makes this a lot easier as it is possible to do

$form['#attached']['js'][] = 'path_to_js_file';

An example of using this could be:

$form['#attached']['js'][] = drupal_get_path('module', 'foo') . '/js/foo.form.js';

edited Jan 28 '22 at 15:05

mbomb007

3,788
3
39
68

answered Apr 06 '10 at 11:58

googletorp

33,075
15
67
82

4

Interesting - I'm surprised that this works without creating an infinite loop, as the call to `theme('node_form')` might end up invoking your override again. Wouldn't it be better to put the `drupal_add_js` call in a `theme_preprocess` function? – Henrik Opel Apr 06 '10 at 12:08
2

@Henrik Opel : I guess a theme_preprocess function would do the trick aswell, I didn't think of it at the time. The theme_node_form function is the function that would be called if the content_type_node_form doesn't exist, so I don't think an infinite loop is of any danger. But I guess it is a bit more hackish than just using s theme preprocess function. – googletorp Apr 06 '10 at 12:23
You could do return theme_node_form($form); instead of return theme('node_form', $form); to avoid infinite looping. – rooby May 09 '13 at 11:15
Instead of adding this to theme I would add this to a module and in the module you simply implment (add) function named `_form_
_alter`.
– Nux Apr 22 '15 at 16:32

score 2 · Answer 2 · answered Apr 06 '10 at 11:47

I posted a patch to the Smilies module that fixes this problem: Smilies are not selectable when resubmitting a page

The patch adds a hook_nodeapi() function to check if the node operation is "verify" and if it is, it checks if the node is supposed to have smileys and if so calls the function to add the smileys.js javascript file that creates the selection form.

You should just need to do the same in your case. This will require you write a very simple module that implements the hook_nodeapi function and checks for updates in the same way the patched Smileys module does.

Thanx for the tip. I ended up using a theme function to do the trick since it's a bit more clean in this specific case. — googletorp, Apr 06 '10 at 12:00

score 0 · Answer 3 · edited Dec 18 '15 at 17:43

You can user hook_nodeapi with case prepare:

Example:

/**
 * Implementation of hook_nodeapi
 */

function mymodulename_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL) {
  switch($op) {     
    case 'prepare':
      $module_path = drupal_get_path('module' , 'mymodulename'); 
      drupal_add_js($module_path."/myscript.js");
      break; 
  }
}

Now you can add your javascript code in your module folder e.g. myscript.js.

Adding js to a drupal node form

3 Answers3