You need to sign in to do that
Don't have an account?
praveen Reddy 186
Onchage event is not firing on html select when we use select2 JQuery plug in lightning components
Hi,
we have create pick list with serach functioanlity using select2 Jquery plug in. we are using html select to create picklist and it has onchange event.
With Select2 JQuery plugin onchange event is not firing.
Component:
<aura:component controller="DCOM_distributor_Picklist_Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:actionOverride,forceCommunity:availableForAllPageTypes">
<ltng:require aura:id="select2" styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}"
scripts="{!join(',',
$Resource.jquery224 ,
$Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
<aura:attribute name="regionID" type="String" />
<aura:attribute name="distributorID" type="String" />
<aura:attribute name="picklistValues" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:layoutItem flexibility="auto"> <!-- padding="around-small" -->
<div class="custom-box">
Distributor<span class="red slds-p-right_xx-small slds-p-left_xx-small">*</span>:
<select style="width:70%;height:16px;" aura:id="picklist" class="select2Class" onchange="{!c.onChangeDistributor}">
<aura:iteration items="{!v.picklistValues}" var="item">
<option value="{!item.value}"> {!item.label} </option>
</aura:iteration>
</select>
<!-- <lightning:select value="{!v.distributorID}">
<option value="">Choose one...</option>
<aura:iteration items="{!v.picklistValues}" var="item">
<option text="{!item.label}" value="{!item.value}" selected="{item.selected}"/>
</aura:iteration>
</lightning:select> -->
</div>
</lightning:layoutItem>
</aura:component>
JS Controller:
({
doInit : function(component, event, helper) {
helper.onloadMethod(component,component.get("v.regionID") );
},
onChangeDistributor : function(component, event, helper) {
alert('test');
},
scriptsLoaded : function(component, event, helper) {
console.log('load successfully');
// active/call select2 plugin function after load jQuery and select2 plugin successfully
$(".select2Class").select2({
placeholder: "Select branch"
});
}
})
On pick list selection onchange event should fir and call onChangeDistributor method. But it is not calling. if I comment ltng:require onchage event is getting fired.
Any idea on why it is not wokring onchange event with select2 library.
Thanks in advance
Praveen
we have create pick list with serach functioanlity using select2 Jquery plug in. we are using html select to create picklist and it has onchange event.
With Select2 JQuery plugin onchange event is not firing.
Component:
<aura:component controller="DCOM_distributor_Picklist_Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:actionOverride,forceCommunity:availableForAllPageTypes">
<ltng:require aura:id="select2" styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}"
scripts="{!join(',',
$Resource.jquery224 ,
$Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
<aura:attribute name="regionID" type="String" />
<aura:attribute name="distributorID" type="String" />
<aura:attribute name="picklistValues" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:layoutItem flexibility="auto"> <!-- padding="around-small" -->
<div class="custom-box">
Distributor<span class="red slds-p-right_xx-small slds-p-left_xx-small">*</span>:
<select style="width:70%;height:16px;" aura:id="picklist" class="select2Class" onchange="{!c.onChangeDistributor}">
<aura:iteration items="{!v.picklistValues}" var="item">
<option value="{!item.value}"> {!item.label} </option>
</aura:iteration>
</select>
<!-- <lightning:select value="{!v.distributorID}">
<option value="">Choose one...</option>
<aura:iteration items="{!v.picklistValues}" var="item">
<option text="{!item.label}" value="{!item.value}" selected="{item.selected}"/>
</aura:iteration>
</lightning:select> -->
</div>
</lightning:layoutItem>
</aura:component>
JS Controller:
({
doInit : function(component, event, helper) {
helper.onloadMethod(component,component.get("v.regionID") );
},
onChangeDistributor : function(component, event, helper) {
alert('test');
},
scriptsLoaded : function(component, event, helper) {
console.log('load successfully');
// active/call select2 plugin function after load jQuery and select2 plugin successfully
$(".select2Class").select2({
placeholder: "Select branch"
});
}
})
On pick list selection onchange event should fir and call onChangeDistributor method. But it is not calling. if I comment ltng:require onchage event is getting fired.
Any idea on why it is not wokring onchange event with select2 library.
Thanks in advance
Praveen
if any one identified issue please let me know.
Thanks
Praveen
Even I'm also facing the same issue with the standard HTML tag <select> in the Aura component. onchange event was not firing.
I did not get any solution.
<div class="slds-form-element">
<label class="slds-form-element__label" for="picklist">Region</label> <br/>
<select style="width:100%" id="picklist" name="selectregionItem" class="select2Class" multiple="multiple" onchange="{!c.handleregionchange}">
<aura:iteration items="{!v.regionoptions}" var="opts">
<option value="{!opts.value}" selected="{!opts.selected}"> {!opts.label} </option>
</aura:iteration>
</select>
</div>
Thanks,
Muralikrishna.