+ Start a Discussion
Fnu SumitFnu Sumit 

i got following error can anyone suggest what to do- Something has gone wrong. Error during init [TypeError: Cannot read property 'apply' of undefined] . Please try again

error: 
Something has gone wrong. Error during init [TypeError: Cannot read property 'apply' of undefined] . Please try again
expenses component:
<aura:component controller="ExpensesController">

    <aura:attribute name="expenses" type="Expense__c[]"/>

 
    <aura:handler name="createExpense" event="c:expensesItemUpdate"
        action="{!c.handleCreateExpense}"/>
    <aura:handler name="updateExpense" event="c:expensesItemUpdate"
        action="{!c.handleUpdateExpense}"/>
   <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Expenses</p>
          <h1 class="slds-text-heading--medium">My Expenses</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">

        <c:expenseForm/>

    </div>
    <!-- / NEW EXPENSE FORM -->

    <!-- EXISTING EXPENSES -->
    <div class="slds-grid slds-m-top--large">

        <!-- EXPENSES LIST -->
        <div class="slds-col slds-col-rule--right slds-p-around--small
            slds-size--8-of-12">
            <c:expensesList expenses="{!v.expenses}"/>
        </div>
        <!-- / EXPENSES LIST -->

        <!-- SOMETHING COOL -->
        <div class="slds-col slds-p-left--large slds-size--4-of-12">
            <!-- Bonus lesson, coming in July.
                 Watch this space for details. -->
        </div>
        <!-- / SOMETHING COOL -->

    </div>
    <!-- / EXISTING EXPENSES -->

</aura:component>
expenses controller:
({
    
handleCreateExpense: function(component, event, helper) {
    var newExpense = event.getParam("expense");
    helper.createExpense(component, newExpense);
},
    handleUpdateExpense: function(component, event, helper) {
    var updatedExp = event.getParam("expense");
    helper.updateExpense(component, updatedExp);
},




   // Load expenses from Salesforce
doInit: function(component, event, helper) {

    // Create the action
    var action = component.get("c.getExpenses");

    // Add callback behavior for when response is received
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            component.set("v.expenses", response.getReturnValue());
        }
        else {
            console.log("Failed with state: " + state);
        }
    });

    // Send action off to be executed
    $A.enqueueAction(action);
}
    
        }
    }
})
expenses halper:
({
   
  createExpense: function(component, expense) {
    this.saveExpense(component, expense, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var expenses = component.get("v.expenses");
            expenses.push(response.getReturnValue());
            component.set("v.expenses", expenses);
        }
    }
},

updateExpense: function(component, expense) {
    this.saveExpense(component, expense);
}


   
})


expenseList component:
<aura:component >

    <aura:attribute name="expenses" type="Expense__c[]"/>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Expenses</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.expenses}" var="expense">
                    <c:expenseItem expense="{!expense}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

expensesItem component:
<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
<aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

    <div class="slds-card">

        <!-- Color the item green if the expense is reimbursed -->
        <div class="{!v.expense.Reimbursed__c == true ?
            'slds-theme--success' : 'slds-theme--warning'}">

            <header class="slds-card__header slds-grid grid--flex-spread">
                <a aura:id="expense" href="{!'/' + v.expense.Id}">
                    <h3>{!v.expense.Name}</h3>
                </a>
            </header>

            <section class="slds-card__body">
                <div class="slds-tile slds-hint-parent">
                    <p class="slds-tile__title slds-truncate">Amount:
                        <ui:outputCurrency value="{!v.expense.Amount__c}"/>
                    </p>
                    <p class="slds-truncate">Client:
                        <ui:outputText value="{!v.expense.Client__c}"/>
                    </p>
                    <p class="slds-truncate">Date:
                        <ui:outputDate value="{!v.expense.Date__c}"/>
                    </p>
                    <p class="slds-truncate">Reimbursed?
                        <ui:inputCheckbox value="{!v.expense.Reimbursed__c}"
                            click="{!c.clickReimbursed}"/>
                    </p>
                </div>
            </section>
        </div>
    </div>

</aura:component>
expensesItem controller:
({
    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var upsertEvent = component.getEvent("updateExpense");
        upsertEvent.setParams({ "expense": expense });
        upsertEvent.fire();
    }
})

expenses form:
<aura:component >
    <aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>
    <aura:registerEvent name="createExpense" type="c:expensesItemUpdate"/>

    
	 <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">

      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <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}"
                  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:inputDate 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}"/>
      </div>

      <div class="slds-form-element">
          <ui:button label="Create Expense"
              class="slds-button slds-button--brand"
              press="{!c.clickCreateExpense}"/>
      </div>

    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

</aura:component>

expenseForm controller:
({
    clickCreateExpense: function(component, event, helper) {
    if(helper.validateExpenseForm(component)){
        // Create the new expense
        var newExpense = component.get("v.newExpense");
        helper.createExpense(component, newExpense);
    }

    
        }
    
})


expenseFrom Helper:
({
     validateExpenseForm: function(component) {

    // Simplistic error checking
    var validExpense = true;

    // Name must not be blank
    var nameField = component.find("expname");
    var expname = nameField.get("v.value");
    if ($A.util.isEmpty(expname)){
        validExpense = false;
        nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
    }
    else {
        nameField.set("v.errors", null);
    }

    // Amount must be set, must be a positive number
    var amtField = component.find("amount");
    var amt = amtField.get("v.value");
    if ($A.util.isEmpty(amt) || isNaN(amt) || (amt <= 0.0)){
        validExpense = false;
        amtField.set("v.errors", [{message:"Enter an expense amount."}]);
    }
    else {
        // If the amount looks good, unset any errors...
        amtField.set("v.errors", null);
    }
    
    return(validExpense);
},
    createExpense: function(component, newExpense) {
    var createEvent = component.getEvent("createExpense");
    createEvent.setParams({ "expense": newExpense });
    createEvent.fire();
}


   
})

 
NagendraNagendra (Salesforce Developers) 
Hi Fnu Sumit,

Please check with below post from stack exchange community with similar issue which might help you to accelerate with the above requirement. Please let us know if this helps.

Kindly mark this as solved if it's resolved so that it gets removed from the unanswered queue and becomes a better solution for others.

Best Regards,
Nagendra.P