4

I have a test setup, but i am unable to get it working. I have lightning page which shows Names of few accounts as an inputText using aura:iteration. I need to detect any change made by user on these inputText boxes. But change event doesnt seem to fire. Can anyone tell me what am i doing wrong here?

Aura App code

<aura:application controller="AutoSaveAppController" >
    <aura:attribute name="accts" type="Account[]"/>


    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="change" value="{!v.accts}" action="{!c.acctsChanged}"/>

    <aura:iteration items="{!v.accts}" var="currAcct" indexVar="index">
        <ui:inputText label="Acct  " value="{!currAcct.Name}"/>
    </aura:iteration>
</aura:application>

Aura client side controller -

({
    doInit : function(cmp, evt, helper) {
        var getAccts = cmp.get("c.loadAccounts");
        getAccts.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS"){
                var allAccts = response.getReturnValue();
                cmp.set("v.accts", allAccts);
            }else {
                    console.log("Unknown error");
            }
        });
        $A.enqueueAction(getAccts);
    },

    acctsChanged :function(cmp, evt, helper){
      console.log("Change Detected");  
    }
})

Aura server side controller -

public class AutoSaveAppController {

    @AuraEnabled
    public static Account[] loadAccounts(){
        Account[] randomAccts = [Select Name From Account limit 10];
        return randomAccts;
    }
}

On the page load, it should show names of few accounts in a text box. And when i change something in those boxes (and move mouse out of that box and click somewhere else), developer console should show "Change detected". But nothing is happening.

3

I think your acctsChanged method will only be called when the accts list attribute is changed not when the Name field of one of the items in the list is changed.

So for this case use:

<ui:inputText label="Acct  " value="{!currAcct.Name}" keyup="{!c.acctsChanged}"/>
  • Yeah i got that working too. But this is just a sample code. Actual implementation has lot of fields. Is there a way where if any field on any account changes, that event is fired (without putting "change" on every field) – user11287638 Apr 25 '17 at 22:51
  • @user11287638 I assume that checking every node of what could be a large object tree is to expensive for the platform hence its necessary to declare the ones you are interested in. I don't know if there is a more elegant approach than many change handlers. – Keith C Apr 26 '17 at 6:52

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.