Adding js files to specific pages

Events happening in the community are now at Drupal community events on www.drupal.org.
killerrabbit's picture

I have two different plug-ins that require two different versions of Jquery. I need to have the specific file load according to the page it is on. I have found the following code but have not been able to get it working.

<?php
function yourModuleOrThemeName_preprocess_page(&$variables) {
  if(
arg(0) == 'yourPage') {
   
$scripts = drupal_add_js();
   
   
$new_jquery = array('yourNewJQueryPath/jquery14.js' => $scripts['core']['misc/jquery.js']);
   
$scripts['core'] = array_merge($new_jquery, $scripts['core']);
    unset(
$scripts['core']['misc/jquery.js']);
   
   
$variables['scripts'] = drupal_get_js('header', $scripts); 
  }
}
?>

I have added this script to the template.php. I am not sure if I need to change the function name or not. Also, in the "your page" I have tried both the node name (node/8) and the clean name of "home".

Suggestions?
Thanks!

Comments

If you are using a custom

kabarca's picture

If you are using a custom modules, best practice (cleaner) is to place the following code in the module itself, js/css/images should be inside the same folder.

function your_module_init(){

if ($_GET['q'] == 'your_page_name') {
   drupal_add_js(drupal_get_path('module', 'your_module') .'/your_module.js');
}

}

Now, if you aren't using a custom module, easiest way will be to create two different different .tpl files for your pages. Create "page-home.tpl.php" or "page-front.tpl.php" and call the js from there, that way the js will be used only for that specific tpl page. Remember Drupal already includes jQuery so page.tpl.php still has the last version of the plugin.


Kabarca

Calling js from tpl.php

killerrabbit's picture

Thanks, how do I call it from the page-front.tpl.php? I have read different things and am pretty confused about it.

path_to_theme

kabarca's picture

script type="text/javascript" src="|?php print base_path() . path_to_theme() ?|yourScript.js"||/script|

Replace | for <> body comment is playing weird.. doesnt accept full code.

Place it in the header of your page-front.tpl.php


Kabarca

My theme path is:

killerrabbit's picture

My theme path is: "/sites/all/themes/ponderosa"
The js file is: jquery-1.4.2.min.js

Would it be:
|script type="text/javascript" src="|?php print base_path() .path_to_theme('/sites/all/themes/ponderosa') ?| jquery-1.4.2.min.js"||/script| ?

I tried that but it didn't seem to work.

Thanks

path_to_theme

kabarca's picture

I have email you the details because seems like code filter is mixing up the whole code here....

Important:
base_path is the path to the root folder of your drupal installation.
path_to_theme is the path to your theme's folder so you don't need to specify any path there.


Kabarca

tinem's picture

Also very interested in this subject could I have the mail too send to tinem@email.dk

compatibility problems - jquery 2 times

matiasc's picture

To avoid including both versions of jquery, first you have to remove the older version of jquery and add the newer, in that page you want (you said: "I have two different plug-ins that require two different versions of Jquery. I need to have the specific file load according to the page...".

So this link allows you to do this, first remove the jquery.js form $scripts variable, and then add another version (the version for your plug-in) for specific pages.

@matiascarranza

Heres the solution

InfluenceJamie's picture

Okay, I had this problem myself and worked out a solution for it so thought I would let the rest of you know:

Drupal has a function "drupal_add_js" (or drupal_add_css depending on what you want to add).

To use it you can add it to a conditional if statement like:

<?php

if ($is_front) {
    
drupal_add_js(path_to_your_js_file);
}
?>

If you're really sharp you can do something more like this:

drupal_add_js(drupal_get_path('theme', 'your_theme') . '/js/yourjsfile.js');

which gets the location of your theme directory and appends "/js/yourjsfile" to the end of it.

SOLVED!

Javascript

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: