0

I am trying to use below Select2.js library in my Lightning Aura Component. I loaded the library properly and even the jQuery, I am getting alerts in afterScriptLoaded method.

However, when try to use the select2() function, it gives me error that $ is not defined.

Select2 library: https://select2.org/

As per this question, it should work regardless of the Locker Service, however it is not. cannot use select2 jquery library in lightning components with LorckerService activated

Here is what I tried:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<ltng:require scripts="{!$Resource.jQuery}" afterScriptsLoaded="{!c.jsLoaded}"/>
<ltng:require scripts="{!$Resource.Select2 + '/dist/js/select2.min.js'}" afterScriptsLoaded="{!c.selectJsLoaded}"/>
<ltng:require styles="{!$Resource.Select2 + '/dist/css/select2.min.css'}" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<select id="picklistSelectBox" class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

</aura:component>

Controller.js

({
doInit : function(component, event, helper) {
     //$('.js-example-basic-single').select2();
    //jQuery(".js-example-basic-single").select2();
},

jsLoaded: function(component, event, helper) {
    alert('jsLoaded');
},

selectJsLoaded: function(component, event, helper) {
    alert('selectJsLoaded');
}

})

Renderer.js

({
afterRender: function(component, helper) {
    this.superAfterRender();
    //var picklistSelectBox = $('.js-example-basic-single');
    //var picklistSelectBox = jQuery('#picklistSelectBox');
    //jQuery(picklistSelectBox).select2();
    var picklistSelectBox = $('#picklistSelectBox');
    $(picklistSelectBox).select2();
}

})

I need help working this out. Can you please help. Also can it work in LWC?

1

Scripts are loaded asynchronously from static resources, and the framework provides no invariants about when they will be loaded in the component's initialization process. Here, you're trying to invoke the libraries you're loading before they are loaded. You have no guarantee about the relative order of execution of doInit(), afterRender(), or your afterScriptsLoaded handlers.

You must not invoke any JQuery or Select2 functions until your afterScriptsLoaded handlers have been called. If needed, you can store the loading status in a Boolean attribute in your component so that you can easily check it in other methods.

While the implementation will differ in LWC, it is still asynchronous and your code must take that into account.

2
  • actually, the error in afterRender come after both the alerts in afterScriptsLoaded are called, so in my case, though it might be asynchronous, the libraries are loading first and then afterRender is callled, still I am getting the error, I will try with a boolean attribute as you suggested as well. thanks
    – mvk1991
    Mar 5 at 3:25
  • thanks Dave.. error went.. but now the dropdown is getting hidden on page. I used the rerender method and checked the component aura attribute boolean .. which gets set in afterScriptsLoaded.
    – mvk1991
    Mar 5 at 6:22

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.