2

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

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.

  • Is it because of the source file issue? I'm also facing similar issue while loading Highcharts source file. I don't have jQuery in it. – SE_User Oct 25 '16 at 14:08
1

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.

  • I get the same behavior. jQuery gets loaded that I can see in the Sources tab of the developer tools, as does the CSS for jQueryUI, but jQueryUI does not load, and the afterScriptsLoaded event does not fire. – Jasper Sardonicus Jun 29 '16 at 13:42
  • Additionally, I have tried adding onclick events to fire on certain elements, and in the event, I try using jQuery, and I get an error about '$ is not defined' – Jasper Sardonicus Jun 29 '16 at 14:53

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.