[SalesForce] Lightning Component – pass variables from component to apex & get result back

I'm trying to pass a date field from a component to apex class and then return a string to my component. But I can't figure it out.

Here is the detail of my code :

lf_reports_controller.apxc

public class lf_reports_controller {

@AuraEnabled
public static String format_date(Date input_date){        
    String return_value = 'test';

    return return_value;}
}

lf_report.cmp

<aura:component controller ="lf_reports_controller"
            implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
            access="global" >

<aura:attribute name="start_date" type="Date" default="" access="global"/>
<aura:attribute name="end_date" type="Date" default="" access="global"/>
<aura:attribute name="formated_start_date" type="String" default="undefined" access="global"/>

Custom Report <br/><br/>
<ui:inputDate aura:id="cmp_input_start_date" label="Start Date" class="field" value="{!v.start_date}" displayDatePicker="true" />
<ui:inputDate aura:id="cmp_input_end_date" label="End Date" class="field" value="{!v.end_date}" displayDatePicker="true" />
Start Date: <ui:outputDate aura:id="cmp_display_start_date" value="{!v.start_date}" /> <br/>
End Date: <ui:outputDate aura:id="cmp_display_end_date" value="{!v.end_date}" /> <br/><br/>

<ui:button class="btn" label="Format" press="{!c.format_date}"/> <br/>
Formated Start Date : <ui:outputText aura:id="formated_start_date" value="{!v.formated_start_date}" />

lf_reportController.js

format_date : function(component, event, helper) { 
    helper.format_date(component); 
},

lf_reportsHelper.js

format_date: function(component) {
    var input_date = component.get("v.cmp_input_start_date");
    var action = component.get("c.format_date");
    action.setParams({
        "input_date": input_date,
    });
    action.setCallback(this, function(response) {
        this.getResponse(response, component);
    });
    $A.enqueueAction(action);
},

getResponse: function(response, component) {
    var stringResult = response.getReturnValue();
    component.set("v.formated_start_date", stringResult);
}

I then created a custom page, & when I click the format button, I get the following error :

    Uncaught rerender threw an error in 'markup://c:lf_reports' [Maximum call stack size exceeded]
throws at https://*****--******.lightning.force.com/auraFW/javascript/yFpIOtval-qIdUy0rMdm1A/aura_prod.js:2:15
String.match()@(native)
rerender()@components/aura/component.js:2:369

Do you have a lead on what's going wrong ?

Thanks a lot..

Best Answer

You're encountering a little-known bug in Lightning that occurs when your JS function has the same name as your controller's Apex method name (in you case, format_date). The code goes into recursion and, eventually, your stack gets too big and errors out.

Change one of the two to something else (format_date_Apex, or anything else) and it will work.

Per @Jeff's excellent research (in comments), this is noted in the documentation here

Use unique names for client-side and server-side actions in a component. A JavaScript function (client-side action) with the same name as a server-side action (Apex method) can lead to hard-to-debug issues.

Related Topic