flexslider.load.js loading before jquery.js [#2464125]

 <script type="text/javascript" src="http://oursite/sites/all/modules/flexslider/assets/js/flexslider.load.js?nm5mei"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.jQuery || document.write("<script src='/drupal7/sites/all/modules/jquery_update/replace/jquery/1.8/jquery.min.js'>\x3C/script>")
//--><!]]>
</script>

This is the order of javascript files when I view the source code. And in the console I am getting error ReferenceError: jQuery is not defined

The slideshow is not working. It is just blank.Any solutions?

Comments

Comment #1

ktrev CreditAttribution: ktrev commented 2 April 2015 at 01:10

Issue summary:

View changes

Editing the issue

Comment #2

ktrev CreditAttribution: ktrev commented 2 April 2015 at 01:56

Category:

Bug report

» Support request

Updated Issue Category

Comment #3

ktrev CreditAttribution: ktrev as a volunteer commented 11 May 2015 at 07:47

Status:

Active

» Closed (fixed)

We fixed this issue as follows :

Cause of error: jquery.js was loading after the flexslider javascript files. (May be an issue with the theme we use)

Fixed it : by moving flexsilder javascript files from the module folder to the theme js folder and changed the line in the .module file where flexsilder java script files was included

Comment #4

loophole080 CreditAttribution: loophole080 commented 15 July 2015 at 16:03

same issue - for some reason the site i'm working on has the js in the 'header' scope loading after the 'footer' scope - flexslider module is set to use the 'footer' scope

better fix than the module hack above is to implement hook_js_alter() and change the scope of the flexslider script, e.g.:

/**
 * Implements hook_js_alter(). 
 */
 function MY_MODULE_js_alter(&$javascript) {
  // change js scope for the flexslider script to ensure it loads in correct sequence relative to other js (especially jQuery)
  $javascript['sites/all/modules/contrib/flexslider/assets/js/flexslider.load.js']['scope'] = 'header';       
 }

Comment #5

joegl CreditAttribution: joegl commented 23 August 2016 at 21:02

Status:

Closed (fixed)

» Needs work

Having this issue on a site. I don't believe the aforementioned "fix" is really a fix when you change the .module code directly without including the patch, which is why I'm re-opening this.

The flexslider.load.js is being loaded before ALL other .js files (including the core drupal.js and jquery.js). The flexslider-min.js script in the libraries is loading in the correct order.

Comment #6

joegl CreditAttribution: joegl commented 23 August 2016 at 21:16

Status:

Needs work

» Closed (works as designed)

The issue for me, and possibly for others, is the load order in the html.tpl.php

- The core JavaScript scripts (drupal.js, jquery.js, etc.,) are all added with no scope (header, footer, etc.,)
- The flexslider.load.js script is added to the scripts queue with a "footer" scope
- The output order for the script queue should be: Header, No scope, Footer

However, the html.tpl.php actually ends up determining this order. In the html.tpl.php you have a number of variables available, including these two: $scripts and $page_bottom. Scripts with "no scope" are output where the $scripts variable is. Scripts with the "footer" scope are output where the $page_bottom variable is.

The default html.tpl.php order has:

  <?php print $scripts; ?>

  <?php print $page_bottom; ?>

The site I'm working on has the reverse order:

  <?php print $page_bottom; ?>

  <?php print $scripts; ?>

So the flexslider.load.js was being output in the $page_bottom before the core jquery.js script was loaded via $scripts. Flipping the order fixed it.

EDIT: I must have not been reading close enough as the previous poster pretty much diagnosed this. I hope that my comments are useful anyway!

Comment #7

Nil.Ned CreditAttribution: Nil.Ned commented 2 October 2017 at 11:28

Dear friends,
I fixed it change line 410 from flexslider.module:

drupal_add_js(drupal_get_path('module', 'flexslider') . '/assets/js/flexslider.load.js', array('type' => 'file', 'scope' => 'footer'));

to:

drupal_add_js(drupal_get_path('module', 'flexslider') . '/assets/js/flexslider.load.js', array('type' => 'file', 'scope' => 'header', 'weight' => 100));