How do I add JavaScript specific for a view?

Question

I have a view in my site that has a specific class name. I want to know, inside the template.php file of a theme, how I can know if a view with specific class name is available in the requested page.

This is very important for me because I need to include specific JavaScript and CSS, when a view with a specific class name (such as image-gallery) is used in a page.

Answer 1

You could use the template_preprocess_views_view() hook to do this:

function THEME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  // Make sure it's the correct view
  if ($view->name === 'your-view-name') {
    // add needed javascript
    drupal_add_js(drupal_get_path('theme', 'your-theme') . '/your-js.js');
    // add needed stylesheet
    drupal_add_css(drupal_get_path('theme', 'your-theme') . '/your-css.css');
  }
}

Note that you could also check the specific display of the view using:

if ($view->name == 'your-view-name' && $view->current_display === 'your-display-id') {
  // include javascript & css here
}

You should be able to check for a custom css class like this:

if ($view->name == 'your-view-name' && $view->display[$view->current_display]->display_options['css_class'] === 'your-css-class') {
   // include javascript & css here
}

Answer 2

You can use views_get_page_view function to find out which view is being served on the page. It return views object. Note that in the code snippet below you should compare with views machine readable name, but of course you can write your own comparaison basing on the view object returned by views_get_page_view

function YOURTHEMENAME_preprocess_page(&$variables) {
    $view = views_get_page_view();
    if($view->name == 'YOURVIEW') {
    //Do what ever you want 
    }

Answer 3

Just in case this is useful to anyone else stumbling across this question, searching like I did for attach JavaScript to a Drupal View. In terms of D7 & Views 3.7, the following worked best for me:

function HOOK_views_pre_render ( &$view ) { 
  /// check to make sure the view has a classname
  if ( $view->display_handler && !empty($view->display_handler->options['css_class']) ) {
    $cln = $view->display_handler->options['css_class'];
    $cls = 'CLASS GOES HERE';
    /// test that the classname contains our class
    if ( preg_match('/(^|\s+)' . preg_quote($cls) . '(\s+|$)/i', $cln) ) {
      /// build the path to the js, which is local to my module, js/view.js
      $sep = DIRECTORY_SEPARATOR;
      $dir = rtrim(drupal_get_path('module', 'HOOK'), $sep);
      $pth = "{$dir}{$sep}js{$sep}view.js";
      drupal_add_js($pth);
    }
  }
}

This was beneficial as I wanted to keep the code within my module, rather than the theme — because the enhancements brought by the JavaScript had nothing to do with visual appearance.

NOTE: Obviously HOOK should be replaced with your module name, in both locations, and CLASS GOES HERE should also be replaced with the class you are searching for.

Answer 4

If you're on drupal 6 or 7 you can also include javascript assets with the module context add assets. Which does require context but you'll rest assure that it'll always be included when the view is being rendered.

https://drupal.org/project/context_addassets

From the module's project page:

Have you ever wanted to include javascript or css when a particular view or block is being rendered? Or have you ever wanted to include javascript or css for just the front page without having to write code?

Context add assets allows you to do this. It has an easy to use UI to allow you to do this all without writing any code. Because it uses ctools all of this is also exportable.

Answer 5

Write JavaScript code that searches for specific class in the view, using jQuery's hasClass(), and include your JavaScript file when the condition is satisfied.

Another way is to put a template for your view, and add JavaScript code through that template using drupal_add_js().