Adding JavaScript and CSS to a particular menu page

Question

I have set up a Drupal 7 web site with a few custom blocks and menus written by me.

I have a non-Drupal PHP script displaying users (some of them are external, i.e. not stored in drupal tables) as a table with the DataTables jQuery plugin.

I would like to rewrite that script as a Drupal menu, so that it can be called as http://preferans.de/top.

The content of my.module is the following.

function my_menu() {
  $items['top'] = array (
    'title' => 'Top',
    'description' => 'Top',
    'page callback' => 'my_top_callback',
    'access callback' => TRUE,
    'file' => 'my.top.inc',
    'file path' => drupal_get_path('module', 'my'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

The content of my.top.inc is the following.

function my_top_callback() {
  return array (
    'top_table' => array (
      '#type' => 'markup',
      '#markup' => generate_html_table_with_php(),
    ),
  );
}

My problem is that I don't understand how to add the CSS and JavaScript code, so that it is available for the /top page, but not for any other Drupal paths.

I should probably call:

   drupal_add_css('/demo_table_jui.css', 'file');
   drupal_add_css('/smoothness/jquery-ui-1.8.4.custom.css', 'file');
   drupal_add_js('/jquery.dataTables.min.js', 'file');
   drupal_add_js('
       $(document).ready(function() {
         $("#rating").dataTable( {
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
          });
        ', 'inline');

(Please see the head-section of my original non-Drupal script).

How do I limit these calls to the /top page and where should I perform these calls? Should I put them in a hook, or by adding some properties to my menu?

Answer 1

Generally, CSS and JavaScript files are added with hook_init(), which allows those files to be aggregated together, when aggregation is enabled.

Using hook_init() (I suggest you not to do this, anyway) you could conditionally add the files basing on the page being visited.

function my_init() {
  if (arg(0) == 'top') {
    // Add the files.
  }
}

The reason I don't suggest you to do this is that the hook would be called for every pages, including the ones you are not adding the files. hook_init() is generally used to add files to each page.

You can add those files in the menu callback (a.k.a., the page callback); if the menu callback is a form builder function, then you can use the #attached property, as the following code.

$form['#attached']['css'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.css',
);

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

About the inline code you are adding, I would recommend you to put also that in a file, and to use Drupal behaviors instead of $(document).ready(). If you need to pass arguments to the JavaScript code, you can use JavaScript settings (see drupal_add_js() to understand in details how to pass settings to JavaScript code).
Managing JavaScript in Drupal 7 explains in details how to manage JavaScript code in Drupal 7, and the section titles Behaviors reports how Drupal behaviors are changed in the latest Drupal version.

Answer 2

You can add the code in your menu callback. Instead of adding the JS code inline, I would suggest that you create your own JS file.

function my_top_callback() {
  drupal_add_css('/demo_table_jui.css');
  drupal_add_css('/smoothness/jquery-ui-1.8.4.custom.css');
  drupal_add_js('/jquery.dataTables.min.js');
  drupal_add_js(drupal_get_path('module', 'my') . '/my.js');
  return array (
    'top_table' => array (
      '#type' => 'markup',
      '#markup' => generate_html_table_with_php(),
    ),
  );
}

You should then add the my.js file to your my module. Notice that $isn't a global variable in Drupal 7 instead use jQuery:

(function($) {
  $(document).ready(function() {
    $("#rating").dataTable( {
      "bJQueryUI": true,
      "sPaginationType": "full_numbers"
    });
  });
})(jQuery);

You could also make this into a JavaScript behavior which is the recommended thing to do. That would look something like this:

(function ($) {

  Drupal.behaviors.my = {
    attach: function(context, settings) {
      $("#rating").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
      });
    }
  };
})(jQuery);