5

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..

6

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.

| improve this answer | |

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.