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

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);
  }
})

Best Answer

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.

Related Topic