3

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();
12
  • Can you show your JS?
    – Andy
    Aug 15, 2014 at 9:20
  • @Andy, Just added the source of the JavaScript file to the question description. Please let me know if anything seems like it would interfere with jQuery being added to the head of the document.
    – jerome
    Aug 15, 2014 at 13:19
  • What files are the error messages occurring in? The console tells you that as well. What other Javascript files get loaded on the page where you get the errors?
    – faerysteel
    Aug 15, 2014 at 13:57
  • Thanks. Can I just confirm that you've checked the markup, and the jquery script tag appears/disappears as you disable/enable the module?
    – Andy
    Aug 15, 2014 at 13:57
  • @Andy, I have confirmed that jQuery is missing from the markup when the module is enabled. jQuery is present in the markup when the module is disabled.
    – jerome
    Aug 15, 2014 at 14:03

2 Answers 2

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.

1
  • 1
    This should be the best answer. Rookie mistake that I recently made and this was the reason for it. Have an upvote.
    – AndrewMRiv
    Oct 25, 2017 at 23:54
0

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.