1

i am not able to pass the default value of drop down list to my controller. When i click on submit button without changing the drop down list value (ie. index 0 is set as default value), add function of controller is getting called where i am displaying the drop down list value. I am getting "undefined" instead of "abc". Please suggest what is missing in the code.

Below is my code:

Component:

    <aura:attribute name="it" type="string[]" />

    <!-- List -->
    <div id="">
            <div class="list-group">
                <div class="list-group-item">
                    <ui:button press="{!c.DetailPage}" class="btn btn-success pull-right" >plus</ui:button>
                    <h4 class="list-group-item-heading">test</h4>
                </div>
            </div>
    </div>

    <!-- Screen opens when {!c.DetailPage}  -->  
    <div class="container">
    <form aura:id="frm1">
        <fieldset>
        <ui:inputSelect aura:id="P"> 
            <aura:iteration items="{!v.it}" var="item" indexVar="index">
                <aura:if isTrue="{!index ==0}" >
                    <ui:inputSelectOption text="{!item}" value="true"/>
                    <aura:set attribute="else">
                        <ui:inputSelectOption text="{!item}"/>
                    </aura:set>
                </aura:if>
            </aura:iteration>
        </ui:inputSelect> 
            ...
        <ui:button press="{!c.add}" class="btn btn-primary pull-right">Submit</ui:button>
        </fieldset>
    </form>
</div>

Client side controller:

DetailPage : function(component, event, helper) {

    helper.checkdefaultvalue(component, event, helper);
},
add : function(component, event, helper) { 
     var defaultDropdown = component.find("P").get("v.value");
     console.log('p..'+defaultDropdown);
     // here p value is coming as undefined instead of "abc"

   }

Helper :

checkdefaultvalue:function(component, event, helper){
    var action = component.get("c.temp"); 
    action.setCallback(this, function(response){
        var state = response.getState();    
        if (component.isValid() && state === "SUCCESS") {
            var res = response.getReturnValue();  
            component.set("v.it", res);
            console.log("it optiom: "+res);
        }else{console.log("failure...");}    
    });    
    $A.enqueueAction(action);
},

Apex class:

@AuraEnabled
public static List<String> temp() {
    List<string> temp1 = new List<string>();
    temp1.add('abc'); 
    temp1.add('def'); 
    temp1.add('ghi'); 
    System.debug('temp1...'+temp1);
    return temp1;
}   
3
  • component.find("P").get("v.value"); where is P Nov 19, 2015 at 10:37
  • <ui:inputSelect aura:id="P"> Nov 19, 2015 at 11:04
  • There is an attribute 'updateOn' in inputSelect tag. It takes a event on which the picklist's selected field will be updated. By default its CHANGE, you can fire the CHANGE event of that inputSelect tag manually from controller before printing the value and that should set the default value. Nov 19, 2015 at 13:14

1 Answer 1

3

I tried what you are trying to do but was unsuccessful! :(

However I have couple of alternative for you.

Option 1:

Have an aura:attribute as currentValue and set the very first picklist value in it inside the setCallBack function. Use the variable wherever you need. Also, in the CHANGE event of inputSelect, assign the selected value to the currentValue.

In your component:

<aura:attribute name="currentValue" type="String"/>

<ui:inputSelect aura:id="P" change="{!c.setCurrentValue}">
...
</ui:inputSelect>

In your JS controller:

    setCurrentValue: function(component, event, helper){
            var newValue = component.find("P").get("v.value");
            component.set("currentValue", newValue);
        },
    add : function(component, event, helper) { 
        var v = component.get("v.currentValue");
        console.log('p..'+v);

       }

In your helper class:

checkdefaultvalue:function(component, event, helper){
        var action = component.get("c.temp"); 
        action.setCallback(this, function(response){
            var state = response.getState();    
            if (component.isValid() && state === "SUCCESS") {
                var res = response.getReturnValue();  
                component.set("v.it", res);
                component.set("v.currentValue", res[0]); //This will set the 1st value as current one
                console.log("it optiom: "+res);
            }else{console.log("failure...");}    
        });

I have tested this, its working fine.

Coming to Option 2:

inputSelect has an attribute 'updateOn' which takes an event name, firing which will update the selected Value of the picklist. By defult its CHANGE.

Now if you can fire the change event of inputSelect from JScontroller or helper, it should set the selected value of the inputSelect.

Your Component:

<ui:inputSelect aura:id="P" updateOn="change">
...
</ui:inputSelect>

In your JS Controller:

add : function(component, event, helper) { 
        component.find("P").getEvent("change").fire();
        var defaultDropdown = component.find("P").get("v.value");
        console.log('p..'+defaultDropdown);
    }

I haven't tested the 2nd solution but theoretically it should work.

3
  • Thanks Santanu. I followed the approach of ur first option. it works great.. However i did tried the second approach.. No success :( Nov 20, 2015 at 9:00
  • UpdateOn="Change" will only trigger the event when a value from drop down list is changed, So how will it capture the first value as default? Nov 20, 2015 at 9:08
  • 1
    Glad I could help! And in the 2nd solution, I was trying to fire the change event manually by code. component.find("P").getEvent("change").fire(); should fire the event which in turn will set the default value as selected value. I will have to dig into this. Nov 20, 2015 at 10:38

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.