[SalesForce] 2921 calls to onclick method from one button click

I've a simple component with one button with onclick method. The method prints a debug message then calls a server side action. The response code is success. But every time I click on the button the result is 2,921 calls to the onclick method (2,921 debug log messages). All say the response was successful but nothing is in the response. Furthermore with debug logs enabled there is nothing recorded on the server side.

Apex:

public with sharing class cmh18apex_Email {

    @AuraEnabled
    public static String sendEmail(String[] sendTo, String caseId, String subject, String plainTextBody, String htmlBody) {    
        System.debug(Logginglevel.ERROR,'In cmh18apex_Email');
        String result = 'test everything olk';
        return result;
    }
}

Component

<aura:component controller="cmh18apex_Email">
    <lightning:button variant="base" label="Send" onclick="{! c.sendEmail }" >
    </lightning:button> 
</aura:component>

Component controller

({
    sendEmail : function(component, event, helper) {
        var action = component.get("c.sendEmail");        
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var theResponse = response.getReturnValue();
                console.log("Send email response '", theResponse, "'");
            }
        });
        $A.enqueueAction(action);
    }
})

Why is a single button click resulting in so many calls to the onclick method? What is wrong with the code?

Best Answer

The problem is the method name on the client side and server side are the same. So the line in the component controller that gets the "server side controller's method" is actually just getting the client side method, with the same name.

sendEmail : function(component, event, helper) {
    var action = component.get("c.sendEmail");

I thought the syntax component.get("c.method"); was supposed to get the server side controller. But it seems the client side controller can override the server side methods.

The fix is to rename the server or client side methods so they are different.

sendEmail : function(component, event, helper) {
    var action = component.get("c.sendEmailMessage");
Related Topic