1. 技术文章
  2. Drupal - How to add simple jQuery and jQuery UI to head tag?

Drupal - How to add simple jQuery and jQuery UI to head tag?

由 ⅰ亾dé卋堺 提交于 2019-12-25 04:19:41

问题


Personally, I don't like using jQuery Update module, 1. Seems like a lot of unnecessary overhead, and 2. It only allows to update up to jQuery 1.8, which is old and personally this module needs to be updated itself if you ask me!

So I need to add the following URLS to my head tag in Drupal 7, before any other js files get loaded.

Google CDN jQuery URL: //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Google CDN jQuery UI URL: //ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

I've tried putting this into the theme.info file, but it is coming from a CDN, so this won't work, since the js in theme.info links to a relative path there where the theme is the root.

So, how do I add this into the head tag before any of the other scripts under normal conditions in Drupal 7?

I have made the recommended edits and for some reason the CSS file is no longer loading for that theme. I am using the media responsive theme here: https://drupal.org/project/media-responsive-theme

Here is what my theme.php file looks like:

<?php
/**
 * Implements hook_html_head_alter().
 * This will overwrite the default meta character type tag with HTML5 version.
 */
function media_responsive_theme_html_head_alter(&$head_elements) {
  $head_elements['system_meta_content_type']['#attributes'] = array(
    'charset' => 'utf-8'
  );
}

/**
 * Insert themed breadcrumb page navigation at top of the node content.
 */
function media_responsive_theme_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];
  if (!empty($breadcrumb)) {
    // Use CSS to hide titile .element-invisible.
    $output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
    // comment below line to hide current page to breadcrumb
    $breadcrumb[] = drupal_get_title();
    $output .= '<nav class="breadcrumb">' . implode(' » ', $breadcrumb) . '</nav>';
    return $output;
  }
}

/**
 * Override or insert variables into the page template.
 */
function media_responsive_theme_preprocess_page(&$vars) {

    $html5jqueryui = array(
        '#tag' => 'script',
        '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
        ),
        '#prefix' => '',
        '#suffix' => '',
    );

    drupal_add_html_head($html5jqueryui, 'html5jqueryui');

    $html5jquery = array(
        '#tag' => 'script',
        '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
        ),
        '#prefix' => '',
        '#suffix' => '',
    );

    drupal_add_html_head($html5jquery, 'html5jquery');


  if (isset($vars['main_menu'])) {
    $vars['main_menu'] = theme('links__system_main_menu', array(
      'links' => $vars['main_menu'],
      'attributes' => array(
        'class' => array('links', 'main-menu', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      )
    ));
  }
  else {
    $vars['main_menu'] = FALSE;
  }
  if (isset($vars['secondary_menu'])) {
    $vars['secondary_menu'] = theme('links__system_secondary_menu', array(
      'links' => $vars['secondary_menu'],
      'attributes' => array(
        'class' => array('links', 'secondary-menu', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Secondary menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      )
    ));
  }
  else {
    $vars['secondary_menu'] = FALSE;
  }
}

function media_responsive_theme_js_alter(&$js) {
    // var_dump($js);
    unset($js['misc/jquery.once.js']);
    unset($js['misc/jquery.js']);
    unset($js['misc/ui/jquery.ui.core.min.js']);
}

/**
 * Duplicate of theme_menu_local_tasks() but adds clearfix to tabs.
 */
function media_responsive_theme_menu_local_tasks(&$variables) {
  $output = '';

  if (!empty($variables['primary'])) {
    $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>';
    $variables['primary']['#prefix'] .= '<ul class="tabs primary clearfix">';
    $variables['primary']['#suffix'] = '</ul>';
    $output .= drupal_render($variables['primary']);
  }
  if (!empty($variables['secondary'])) {
    $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>';
    $variables['secondary']['#prefix'] .= '<ul class="tabs secondary clearfix">';
    $variables['secondary']['#suffix'] = '</ul>';
    $output .= drupal_render($variables['secondary']);
  }
  return $output;
}

/**
 * Override or insert variables into the node template.
 */
function media_responsive_theme_preprocess_node(&$variables) {
  $node = $variables['node'];
  if ($variables['view_mode'] == 'full' && node_is_page($variables['node'])) {
    $variables['classes_array'][] = 'node-full';
  }
}

function media_responsive_theme_page_alter($page) {
  // <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  $viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
    'name' =>  'viewport',
    'content' =>  'width=device-width'
    )
  );
  drupal_add_html_head($viewport, 'viewport');
}

In the actual source for the head of the page, it looks like this now:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<link rel="shortcut icon" href="http://localhost:8082/sites/all/themes/media-responsive-theme/favicon.ico" type="image/vnd.microsoft.icon" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" />
<meta name="viewport" content="width=device-width" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="alternate" type="application/rss+xml" title="site RSS" href="http://localhost:8082/rss.xml" />
<title>Testing Site | Just a test site</title>
<style type="text/css" media="all">@import url("http://localhost:8082/modules/system/system.base.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.menus.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.messages.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.theme.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/modules/comment/comment.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_api/date.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_repeat_field/date_repeat_field.css?myw3hn");
@import url("http://localhost:8082/modules/field/theme/field.css?myw3hn");
@import url("http://localhost:8082/modules/node/node.css?myw3hn");
@import url("http://localhost:8082/modules/search/search.css?myw3hn");
@import url("http://localhost:8082/modules/user/user.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_example/css/views_slideshow_xtra_example.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_overlay/css/views_slideshow_xtra_overlay.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views/css/views.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/all/modules/admin_menu_dropdown/admin_menu_dropdown.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/ckeditor/ckeditor.css?myw3hn");
@import url("http://localhost:8082/profiles/acquia/modules/ctools/css/ctools.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/jquery.fancybox.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-thumbs.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-buttons.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/all/themes/media-responsive-theme/style.css?myw3hn");
@import url("http://localhost:8082/sites/all/themes/media-responsive-theme/media.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/default/files/fontyourface/font.css?myw3hn");</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alegreya:900&amp;subset=latin" media="all" />
<script type="text/javascript" src="http://localhost:8082/misc/drupal.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_overlay/js/views_slideshow_xtra_overlay.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb_connect.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb_stream.js?myw3hn"></script>
<script type="text/javascript" defer="defer" src="http://localhost:8082/sites/all/modules/admin_menu_dropdown/admin_menu_dropdown.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fancybox/fancybox.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/jquery.fancybox.pack.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/lib/jquery.mousewheel-3.0.6.pack.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-thumbs.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-media.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-buttons.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/masonry/jquery.masonry.min.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/masonry/masonry.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/google_analytics/googleanalytics.js?myw3hn"></script>
<script type="text/javascript" src="//use.edgefonts.net/alegreya:n7.js"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/themes/media-responsive-theme/js/custom.js?myw3hn"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"media_responsive_theme","theme_token":"GE9M-bDBXcKzDxK1W8lZM9a-OjlA00XIZ6zA3sYZHCw","js":{"misc\/drupal.js":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_overlay\/js\/views_slideshow_xtra_overlay.js":1,"sites\/all\/modules\/fb\/fb.js":1,"sites\/all\/modules\/fb\/fb_connect.js":1,"sites\/all\/modules\/fb\/fb_stream.js":1,"sites\/all\/modules\/admin_menu_dropdown\/admin_menu_dropdown.js":1,"sites\/all\/modules\/fancybox\/fancybox.js":1,"sites\/all\/libraries\/fancybox\/source\/jquery.fancybox.pack.js":1,"sites\/all\/libraries\/fancybox\/lib\/jquery.mousewheel-3.0.6.pack.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-media.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-buttons.js":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra.js":1,"sites\/all\/libraries\/masonry\/jquery.masonry.min.js":1,"sites\/all\/modules\/masonry\/masonry.js":1,"sites\/all\/modules\/google_analytics\/googleanalytics.js":1,"0":1,"\/\/use.edgefonts.net\/alegreya:n7.js":1,"sites\/all\/themes\/media-responsive-theme\/js\/custom.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"sites\/all\/modules\/date\/date_api\/date.css":1,"sites\/all\/modules\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/date\/date_repeat_field\/date_repeat_field.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_example\/css\/views_slideshow_xtra_example.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_overlay\/css\/views_slideshow_xtra_overlay.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/admin_menu_dropdown\/admin_menu_dropdown.css":1,"sites\/all\/modules\/ckeditor\/ckeditor.css":1,"profiles\/acquia\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/libraries\/fancybox\/source\/jquery.fancybox.css":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.css":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-buttons.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra.css":1,"sites\/all\/themes\/media-responsive-theme\/style.css":1,"sites\/all\/themes\/media-responsive-theme\/media.css":1,"sites\/default\/files\/fontyourface\/font.css":1,"http:\/\/fonts.googleapis.com\/css?family=Alegreya:900\u0026subset=latin":1}},"fb_connect":{"front_url":"\/","fbu":null,"uid":0},"fb_devel":{"session_id":"T4ElbmGjm-bpoAuSJrtnz6i9T7QvI7ukMr8LT2ZY49Q","session_name":"SESSbce8863eabfd478fab0d5a5077b9e512"},"admin_menu_dropdown":{"key":"`","default":0},"fancybox":{"helpers":{"thumbs":{"width":50,"height":50,"position":"bottom"},"media":[],"buttons":{"position":"top"}}},"masonry":{".view-packages.view-display-id-block .view-content":{"item_selector":".masonry-item","column_width":290,"column_width_units":"px","gutter_width":10,"resizable":true,"animated":true,"animation_duration":500,"fit_width":true,"rtl":false,"images_first":true}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip"}});
//--><!]]>
</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

I think maybe the jquery is being called too early, or there are other variables to unset within $js?

The list of JS errors that populates when I view errors in Chrome is as follows:

Uncaught ReferenceError: Drupal is not defined views_slideshow_xtra_overlay.js:6
Uncaught ReferenceError: Drupal is not defined fb.js?myw3hn:25
Uncaught ReferenceError: Drupal is not defined fb_connect.js:17
Uncaught ReferenceError: Drupal is not defined fancybox.js:7
Uncaught ReferenceError: Drupal is not defined views_slideshow_xtra.js:6
Uncaught ReferenceError: Drupal is not defined masonry.js:8
Uncaught ReferenceError: Drupal is not defined localhost/:1372
Uncaught ReferenceError: Drupal is not defined localhost/:1535
Uncaught ReferenceError: Drupal is not defined admin_menu_dropdown.js:3

Basically, "Drupal is not defined". How to define it?


回答1:


Add the following function in your theme template.php file.

function YOURTHEMENAME_preprocess_html(&$vars) {

   $html5jquery = array(
      '#tag' => 'script',
      '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
      ),
      '#prefix' => '',
      '#suffix' => '',
      );
   drupal_add_html_head($html5jquery, 'html5jquery');

   $html5jqueryui = array(
      '#tag' => 'script',
      '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
      ),
      '#prefix' => '',
      '#suffix' => '',
      );
   drupal_add_html_head($html5jqueryui, 'html5jqueryui');



}


来源：https://stackoverflow.com/questions/20865858/drupal-how-to-add-simple-jquery-and-jquery-ui-to-head-tag

标签
jquery
jquery-ui
drupal-7
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!