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();
  • Can you show your JS? – Andy Aug 15 '14 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 '14 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 '14 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 '14 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 '14 at 14:03
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
    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 '17 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, privacy policy and cookie policy

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