Lightning Component Issues: mutliple scripts not loaded, ltng:require afterScriptsLoaded function not firing

Question

I have tried just about everything I can think of at this point. I am trying to load jQuery, and jQueryUI, and then define an accordion menu using jQueryUI.

There are no issues shown in the Developer Console, just that only jQuery was loaded in the sources tab, and not jQueryUI. I just put a single console.log statement in the afterScriptsLoaded function, and it never fires. Any ideas?

COMPONENT

<aura:component controller="ListViewController" implements="force:appHostable,flexipage:availableForAllPageTypes">
  <ltng:require scripts="{!join(',',$Resource.jquery_2_2_1,$Resource.jqueryUI + '/jquery-ui-1.11.4/jquery-ui.min.js')}" styles="/resource/1461634174000/jqueryUI/jquery-ui-1.11.4/jquery-ui.min.css" afterScriptsLoaded="{!c.jsLoaded}"/>
  <aura:attribute name="objectType" type="String"/>
  <aura:attribute name="listView" type="MetadataService.ListView"/>
  <aura:attribute name="myListViews" type="SelectOption[]"/>
  <aura:attribute name="standardListViews" type="SelectOption[]"/>
  <aura:attribute name="sharedListViews" type="SelectOption[]"/>
  <aura:handler name="init" value="{!this}" action="{!c.initData}"/>
  <div id="ListViewMenu">
    <h3>My List Views</h3>
    <div>
      <ul>
        <aura:iteration var="view" items="{!v.myListViews}">
          <li value="{!view.value}">{!view.label}</li>
        </aura:iteration>
      </ul>
    </div>
    <h3>Standard List Views</h3>
    <div>
      <ul>
        <aura:iteration var="view" items="{!v.standardListViews}">
          <li value="{!view.value}">{!view.label}</li>
        </aura:iteration>
      </ul>
    </div>
    <h3>Shared with Me</h3>
    <div>
      <ul>
        <aura:iteration var="view" items="{!v.sharedListViews}">
          <li value="{!view.value}">{!view.label}</li>
        </aura:iteration>
      </ul>
    </div>
  </div>
</aura:component>

COMPONENT CONTROLLER

({
  initData : function(component, event, helper) {
    var objectType = component.get("v.objectType");
    helper.getMyListViews(component, objectType);
    helper.getStandardListViews(component, objectType);
    helper.getSharedListViews(component, objectType);
  },
  jsLoaded : function(component, event, helper) {
    console.log('scripts loaded');
  // $('#ListViewSelect').accordion();
  },
  change : function(component, event, helper) {
    var selectedListViewName = component.find("ListViewSelect").get("v.value");
    var objectType = component.get("v.objectType");
    console.log(objectType);
    console.log(selectedListViewName);
    helper.describeListView(component, objectType, selectedListViewName);
  }
})

Answer 1

Ok I think I've got it figured out. It had to do with my version of jQuery. I was using jQuery 2.2.1, and switched to jQuery 2.2.4 and it worked. jQuery 3 runs into the same problem.

Answer 2

Did you try using this syntax:

 <ltng:require script="/resource/jQuery,/resource/jQueryUI/js/jquery.min.js" afterScriptsLoaded="{!c.jsLoaded}"/>

For styles,

 <ltng:require styles="/resource/jQueryUI/css/jqueryui.min.css" />

the names of the static resources would be jQuery, jQueryUI and the associated folder structure would be as shown above.