4

I am trying to implement a picklist using the Aura component <ui:inputSelect> with a change event listner. But I see that the change event listener (JavaScript function) is not getting registered with the component.

Below is my component markup

Component Markup

And this is the code in my JS controller:

onChangeFunction: function(component) {
 console.log(component.get('v.value'));
}

Please see that in Chrome web inspector, there is no change event listener registered for the component. So, if I change the value of the picklist component, the onchange event listener function "onChangeFunction" in my controller is not getting invoked. This is my problem

enter image description here

  • Did you try the below answers ? – Praveen Sep 1 '16 at 6:16
  • Hi Praveen, in Chrome web inspector, I see that there is no change event listener registered for the component. So, if I change the value of the picklist component, the onchange event listener function "onChangeFunction" in my controller is not getting invoked. This is my problem. I have posted the screenshot from Chrome Web Inspector as an answer. Please check. – Kiran C V Sep 1 '16 at 6:30
  • Ok let me check at my dev org and will let you know. – Praveen Sep 1 '16 at 6:39
  • I tried at my end and it works fine.See the updated answer. – Praveen Sep 1 '16 at 7:10
  • Kiran, have you tried the sample code in the answer? Let us know what behaviour you see? – Praveen Sep 1 '16 at 19:31
2

Since you haven't given value attribute for the <ui:select/> component, you could do selectCmp.get("v.value") since it is internally available.Click here to find more attributes that are available in the component.

onChangeFunction: function(component,event) {
    console.log(event.getSource().get('v.value')); //only works for aura:component like <ui:inputSelect/>
}

If the value is attribute is binded to aura:attribute, you could do below:

<aura:attribute name="selectedRecType" type="String" access="private" />
<ui:inputSelect value="{!v.selectedRecType}" change="{!c.onChangeFunction}">
 ...
</ui:inputSelect>

Method in Controller.js should look like this:

onChangeFunction: function(component,event) {
    console.log(component.get('v.selectedRecType'));
}

--Update--

I tried to reproduce the issue,but change function works at my end.

Component:

<aura:component>
    <aura:attribute name="contactLevel" type="List" access="private"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onChangeFunction}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>
</aura:component>

Controller.js:

({
    doInit : function(cmp,event,helper){
        cmp.set("v.contactLevel",['Primary Contact', 'Secondary Contact', 'Other']);
    },
    onChangeFunction : function(cmp,event){
       console.log(event.getSource().get("v.value"));        
    }
})
  • Hi Praveen, My problem is that the event listener function is not getting registered with the component. – Kiran C V Sep 1 '16 at 5:48
1

In your javascript controller function, you should find the ui:inputSelect component first, and then get the value of that:

onChangeFunction: function(component) {
    console.log(component.find('InputSelectDynamic').get('v.value'));
}

I've tested this in Google Chrome, and it works just fine.

  • Hi I tried same and got error saying "Unknown controller action 'onSelectChange" – AnkushSalesforce Oct 15 '17 at 7:45

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.