You need to sign in to do that
Don't have an account?
Gaurav Gulanjkar 19
WARNING: Callback failed
Hi,
New to lightning, trying to build a single app from the lightning study guide for expence tracker app. I am getting an error as WARNING: Callback failed: apex://ExpenseController/ACTION$getExpenses
Following is my code for component,helper,controller:
App:
Thanks,
Gaurav
New to lightning, trying to build a single app from the lightning study guide for expence tracker app. I am getting an error as WARNING: Callback failed: apex://ExpenseController/ACTION$getExpenses
Following is my code for component,helper,controller:
App:
<aura:application > <ltng:require styles="/resource/SLDSv1/assets/styles/salesforce-lightning-design-system.css" /> <div class="slds"> <div class="slds-page-header"> <div class="slds-grid"> <div class="slds-col slds-has-flexi-truncate"> <p class="slds-text-heading--label">Expenses</p> <div class="slds-grid"> <div class="slds-grid slds-type-focus slds-no-space"> <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1> </div> </div> </div> </div> </div> <div class="slds-col--padded slds-p-top--large"> <c:form /> </div> </div> </aura:application>Form Component:
<aura:component implements="force:appHostable" controller="ExpenseController"> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <ltng:require styles="/resource/SLDSv1/assets/styles/salesforce-lightning-design-system.css" /> <aura:attribute name="expenses" type="Expense__c[]"/> <aura:attribute name="newExpense" type="Expense__c" default="{ 'sobjectType': 'Expense__c', 'Name': '', 'Amount__c': 0, 'Client__c': '', 'Date__c': '', 'Reimbursed__c': false }"/> <!-- If you registered a namespace, replace the previous aura:attribute tags with the following --> <!-- <aura:attribute name="expenses" type="myNamespace.Expense__c[]"/> <aura:attribute name="newExpense" type="myNamespace__Expense__c" default="{ 'sobjectType': 'myNamespace__Expense__c', 'Name': '', 'myNamespace__Amount__c': 0, 'myNamespace__Client__c': '', 'myNamespace__Date__c': '', 'myNamespace__Reimbursed__c': false }"/> --> <!-- Attributes for Expense Counters --> <aura:attribute name="total" type="Double" default="0.00" /> <aura:attribute name="exp" type="Double" default="0" /> <!-- Input Form using components --> <div class="container"> <form class="slds-form--stacked"> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <!-- If you registered a namespace, the attributes include your namespace. For example, value="{!v.newExpense.myNamespace__Amount__c}" --> <ui:inputText aura:id="expname" label="Expense Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Name}" required="true"/> </div> </div> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputNumber aura:id="amount" label="Amount" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Amount__c}" placeholder="20.80" required="true"/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputText aura:id="client" label="Client" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Client__c}" placeholder="ABC Co."/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputDateTime aura:id="expdate" label="Expense Date" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Date__c}" displayDatePicker="true"/> </div> </div> <div class="slds-form-element"> <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{!v.newExpense.Reimbursed__c}"/> <ui:button label="Submit" class="slds-button slds-button--neutral" labelClass="label" press="{!c.createExpense}"/> </div> </form> </div><!-- ./container--> <!-- Expense Counters --> <div class="container slds-p-top--medium"> <div class="row"> <div class="slds-tile "> <!-- Make the counter red if total amount is more than 100 --> <div class="{!v.total >= 100 ? 'slds-notify slds-notify--toast slds-theme--error slds-theme--alert-texture' : 'slds-notify slds-notify--toast slds-theme--alert-texture'}"> <p class="slds-tile__title slds-truncate">Total Expenses</p> $<ui:outputNumber class="slds-truncate" value="{!v.total}" format=".00"/> </div> </div> <div class="slds-tile "> <div class="slds-notify slds-notify--toast slds-theme--alert-texture"> <p class="slds-tile__title slds-truncate">No. of Expenses</p> <ui:outputNumber class="slds-truncate" value="{!v.exp}"/> </div> </div> </div> </div> <!-- Display expense records --> <div class="container slds-p-top--medium"> <div id="list" class="row"> <aura:iteration items="{!v.expenses}" var="expense"> <!-- If you’re using a namespace, use the format {!expense.myNamespace__myField__c} instead. --> <p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p> </aura:iteration> </div> </div> </aura:component>Apex controller:
public with sharing class ExpenseController { @AuraEnabled public static List<Expense__c> getExpenses() { // Perform isAccessible() check here return [SELECT Id, Name, Amount__c, Client__c, Date__c, Reimbursed__c, CreatedDate FROM Expense__c]; } }Form controller:
({ doInit : function(component, event, helper) { //Update expense counters helper.getExpenses(component); },//Delimiter for future code })Form helper:
({ getExpenses: function(component, event, helper) { var action = component.get("c.getExpenses"); action.setCallback(this, function(response) { var state = response.getState(); if (component.isValid() && state === "SUCCESS") { component.set("v.expenses", response.getReturnValue()); this.updateTotal(component); } else if(response.getState() == "ERROR"){ $A.log("callback error", response.getError()); } }); $A.enqueueAction(action); }, updateTotal : function(component) { var expenses = component.get("v.expenses"); var total = 0; for(var i=0; i<expenses.length; i++){ var e = expenses[i]; //If you’re using a namespace, use e.myNamespace__Amount__c instead total += e.Amount__c; } //Update counters component.set("v.total", total); component.set("v.exp", expenses.length); },//Delimiter for future code })
Thanks,
Gaurav
All Answers
you got this error because
-----------------------------------------------------------------------
({
doInit : function(component, event, helper) {
//Update expense counters
helper.getExpenses(component);
},//Delimiter for future code
})
------------------------------------------------------------------------
({
getExpenses: function(component, event, helper) {
var action = component.get("c.getExpenses");
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.expenses", response.getReturnValue());
this.updateTotal(component);
}
else if(response.getState() == "ERROR"){
$A.log("callback error", response.getError());
}
});
$A.enqueueAction(action);
},
updateTotal : function(component) {
var expenses = component.get("v.expenses");
var total = 0;
for(var i=0; i<expenses.length; i++){
var e = expenses[i];
//If you’re using a namespace, use e.myNamespace__Amount__c instead
total += e.Amount__c;
}
//Update counters
component.set("v.total", total);
component.set("v.exp", expenses.length);
},//Delimiter for future code
})
-----------------------------------------------------------------------------------------
public with sharing class ExpenseController {
@AuraEnabled
public static List<Expense__c> getExpenses() {
// Perform isAccessible() check here
return [SELECT Id, Name, Amount__c, Client__c, Date__c,
Reimbursed__c, CreatedDate FROM Expense__c];
}
}
----------------------------------------------------------------------------------------------------------------
ok so you can notice that your apex class method name is getExpenses() and your js helper method name also getExpenses(component)
so there is misunderstanding between server side and client side .
solusation---:
change your helper name like that
({
doInit : function(component, event, helper) {
//Update expense counters
helper.getMyExpenses(component); // or any other name that you want
},//Delimiter for future code
})
-------------------------------------------------------------------------------------------------------------
({
getMyExpenses: function(component, event, helper) {
var action = component.get("c.getExpenses");
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.expenses", response.getReturnValue());
this.updateTotal(component);
}
else if(response.getState() == "ERROR"){
$A.log("callback error", response.getError());
}
});
$A.enqueueAction(action);
},
updateTotal : function(component) {
var expenses = component.get("v.expenses");
var total = 0;
for(var i=0; i<expenses.length; i++){
var e = expenses[i];
//If you’re using a namespace, use e.myNamespace__Amount__c instead
total += e.Amount__c;
}
//Update counters
component.set("v.total", total);
component.set("v.exp", expenses.length);
},//Delimiter for future code
})
Thanks
Please mark this as a best answer if your query is resolved, so it will help others in future.
I am still getting the error after changing the name as suggested above: