[SalesForce] Clicking ui:button causes controller method to repeatedly fire until page crashes

I'm teaching myself Lightning components, and I'm playing around with the ui:button – namely, sending a request to the apex controller to update a specific Contact record.

Unfortunately, I'm having this weird issue with the ui:button. Whenever I click on it, the Javascript Console says that the associated controller method (and hence the helper method) is firing repeatedly. This happens until the page crashes. The Apex Controller method never gets reached.

If I DON'T fire the helper method, there is no issue, so I think its something to do with that. I've looked at the Quick-Start solution in the developer guide, but I had a bit of trouble understanding it – I'm still fairly new to the concept of callbacks and asynchronous code.

My component looks like this (skipping a few bits):

<aura:attribute type="String" name="parentId"/>  
<aura:attribute name="parent" type="Contact"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />  

<ui:button label="Submit"
    class="slds-button slds-button--neutral"
    labelClass="label"
    press="{!c.updateParent}"/>

My controller looks like this:

({
doInit : function(component, event, helper) {
   //Get family data
   helper.getParent(component);
   helper.getChildren(component);
},//Delimiter for future code

updateParent : function(component, event, helper) {
    console.log('controller - updateParent called');
    helper.updateParent(component);
},
})

My helper file looks like this:

({
getParent: function(component) {
    var action = component.get("c.getParent");
    action.setParams({"parentId": component.get("v.parentId")});
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            component.set("v.parent", response.getReturnValue());
            console.log(response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
},

updateParent: function(component) {
    console.log('helper - updateParent called');
    console.log(component.get("v.parent"));
    var action = component.get("c.updateParent");
    action.setParams({"parent": component.get("v.parent")});
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            console.log(response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
},

Best Answer

The rule of thumb in lightning is never name your methods with the same name .

1.Make sure your apex controller methods is never similar to your one of the JS controller methods name

2.Similarly make sure your helper methods name are not similar to the Javascript controller methods name

3.Also make sure helper method names do not conflict with apex controller method name.

Now looking into your code the helper and controller has same method name "updateParent" which is an issue and lightning component underlying code from salesforce is not smart enough to resolve the conflict I believe .

Change the method names in the helper to something different and you should be good .

Related Topic