drupal_add_js is removing jQuery

Question

I have the following in my module.

drupal_add_js(
    drupal_get_path('module', 'responsive_videos') . '/js/fluidvids.js',
    array(
        'type' => 'file',
        'scope' => 'footer',
        'weight' => 10,
    )
);

For some reason, when this module is enabled, jQuery and jQuery Once get removed from the head and the JavaScript console logs many "Uncaught ReferenceError: jQuery is not defined". Can anyone clarify why this is happening, and how to fix it?

Here is the info file, responsive_videos.info.

name = Responsive Video
description = Creates a fluid responsive video from YouTube or Vimeo embedded iframes.
core = 7.x

And here is the module file, responsive_video.module.

<?php
/**
 * @file
 * Makes YouTube and Vimeo embedded iframe videos responsive.
 */

drupal_add_js(
    drupal_get_path('module', 'responsive_video') . '/js/fluidvids.js',
    array('scope' => 'footer')
);

The JavaScript file being added does not leverage jQuery, so I don't quite understand how or if it might interfere with jQuery being added to the page, but here is the source of the "fluidvids.js" file.

// http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory;
  } else {
    root.fluidvids = factory();
  }
})(this, function () {

  'use strict';

  var fluidvids = {
    selector: ['iframe'],
    players: ['www.youtube.com', 'player.vimeo.com']
  };

  var css = [
    '.fluidvids {',
      'width: 100%; max-width: 100%; position: relative;',
    '}',
    '.fluidvids-item {',
      'position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;',
    '}'
  ].join('');

  var head = document.head || document.getElementsByTagName('head')[0];

  function matches (src) {
    return new RegExp('^(https?:)?\/\/(?:' + fluidvids.players.join('|') + ').*$',     'i').test(src);
  }

  function getRatio (height, width) {
    return ((parseInt(height, 10) / parseInt(width, 10)) * 100) + '%';
  }

  function fluid (elem) {
    if (!matches(elem.src) || !!elem.getAttribute('data-fluidvids')) return;
    var wrap = document.createElement('div');
    elem.parentNode.insertBefore(wrap, elem);
    elem.className += (elem.className ? ' ' : '') + 'fluidvids-item';
    elem.setAttribute('data-fluidvids', 'loaded');
    wrap.className += 'fluidvids';
    wrap.style.paddingTop = getRatio(elem.height, elem.width);
    wrap.appendChild(elem);
  }

  function addStyles () {
    var div = document.createElement('div');
    div.innerHTML = '<p>x</p><style>' + css + '</style>';
    head.appendChild(div.childNodes[1]);
  }

  fluidvids.render = function () {
    var nodes = document.querySelectorAll(fluidvids.selector.join());
    var i = nodes.length;
    while (i--) {
      fluid(nodes[i]);
    }
  };

  fluidvids.init = function (obj) {
    for (var key in obj) {
      fluidvids[key] = obj[key];
    }
    fluidvids.render();
    addStyles();
  };

  return fluidvids;

});

fluidvids.init();

Answer 1

The reason it was breaking is because you’re doing drupal_add_js outside of any function or listener hook.

You need to add it to the appropriate build, alter or preprocess hook that suits your needs.

Answer 2

Had the same problem. I solved it using page_build hook.

Example:

-module file:

/**
 * Implements hook_page_build(&$page).
 */
function product_admin_link_control_page_build(&$page) {
    drupal_add_js(drupal_get_path('module', 'product_admin_link_control') . '/product_admin_link_control_init.js', 
    array('type' => 'file', 'scope' => 'footer'));
}

-product_admin_link_control_init.js file:

(function ($) {
try{
  console.info("in");
}catch(oe){}
})(jQuery);

-info file:

; $Id: $
name = Product admin link control
description = Features: removes admin link from CK2 product title for non admins.
package = Commerce (contrib)
core = 7.x

; Base module files


datestamp = "1437076940"