drupal_add_js - working with inline but not file

Question

I have the following code which works:

<?php
function mymodulename_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'job_node_form') {
    drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');
  }
}
?>

but the following doesn't:

<?php
function mymodulename_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'job_node_form') {
    drupal_add_js(drupal_get_path('module','conflict') . '/js/test.js');
  }
}
?>

The code in sites/all/modules/mymodulename/js/test.js is:

If(Drupal.jsEnabled) {
  $(document).ready(function() {
    alert("Hello!");
  });
}

And when I look in the page source when I'm in "job_node_form", I can see the js file loaded.

Edit:

I've found that:

$(document).ready(function()

is causing the issue. I've tried both $ and jQuery.

Is the inline code timed differently to the code in a js file? I'm wondering if the code in the js file runs before all DOM objects are loaded?

Answer 1

With Drupal instead of using $(document).ready, you can/should use Drupal.behaviors. Here is a boilerplate JavaScript wrapper you can use:

(function($, Drupal) {

  // Custom functions and variables can go here

  Drupal.behaviors.moduleName = {
    attach:function() {
      // Put your document's onload code here
    }
  };
}(jQuery, Drupal));

By the way, now that it's all done, to go back to the original topic, I wouldn't/don't use drupal_add_js() at all. Instead, you can do this:

<?php
if($form_id == 'job_node_form') {
  $form['#attached']['js'][] = array(
    'type' => 'file',
    'data' => drupal_get_path('module','conflict') . '/js/test.js',
  );
}
?>

This attaches the file directly to the form, allowing it to be overridden further down the line through the context of the form it belongs to.

Answer 2

function mymodule_submit_add_js($file) {
  drupal_add_js(drupal_get_path('module', 'mymodule') . "/js/name.js");
}