Apex Code Development You need to sign in to do that
Don't have an account?
Timothy Winter Camping List App only saves the first record when clicking Save Item button
I have passed the challenge but the code has a major bug in it that I cannot locate. When I click the "Create Item" button the first time it will save the Camping Item information just fine. However, when I click the button a scond time, the same information will be added to the list of items that was added upon the first click. It does not seem to ever allow to overwrite the values after the button is initially clicked.
Here is my code -- any and all ideas are greatly appreaciated!
campingList Component:
<pre>
</aura:component>
</pre>
</pre>
campingLIstHelper:
***blank***
Here is my code -- any and all ideas are greatly appreaciated!
campingList Component:
<pre>
<aura:component >
<aura:attribute name="items" type="Camping_Item__c[]" />
<aura:attribute name="newItem" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c',
'Name':'',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false }" />
<!-- <ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
-->
<!-- New Expense Form -->
<div class="slds-col slds-col--padded slds-p-top--large">
<div aria-labelledby="newitemform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newitemform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Item
</legend>
<!-- 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="itemname" label="Item Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newItem.Name}"
required="true" />
</div>
</div>
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputNumber aura:id="quantity" label="Quantity"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newItem.Quantity__c}"
required="true"/>
</div>
</div>
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputNumber aura:id="price" label="Price"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newItem.Price__c}"
required="true"/>
</div>
</div>
<div class="slds-form-element">
<ui:inputCheckbox aura:id="packed" label="Packed?"
class="slds-checkbox"
labelClass="slds-form-element__label"
value="{!v.newItem.Packed__c}"/>
</div>
<div class="slds-form-element">
<ui:button label="Create Item"
class="slds-button slds-button--brand"
press="{!c.clickCreateItem}"/>
</div>
</form>
<!-- / CREATE NEW EXPENSE FORM -->
</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW EXPENSE -->
</div>
<!-- iterate? -->
<div class="slds-card slds-p-top--medium">
<header class="slds-card__header">
<h3 class="slds-text-heading--small">Items</h3>
</header>
<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}" />
</aura:iteration>
</div>
</section>
</div>
</aura:component>
</pre>
campingLIstController
<pre>
({
clickCreateItem : function(component, event, helper) {
// Simplistic error checking
var validItem = true;
// Name must not be blank
var nameField = component.find("itemname");
var itemname = nameField.get("v.value");
console.log("nameField value: " + itemname);
if ($A.util.isEmpty(itemname)){
validItem = false;
nameField.set("v.errors", [{message:"Item name can't be blank."}]);
}
else {
nameField.set("v.errors", null);
}
// Quantity must not be blank
var quantityField = component.find("quantity");
var quantity = quantityField.get("v.value");
console.log("quantityField value: " + quantity);
if ($A.util.isEmpty(quantity)){
validItem = false;
quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
}
else {
quantityField.set("v.errors", null);
}
// Price must not be blank
var priceField = component.find("price");
var price = priceField.get("v.value");
console.log("priceField value: " + price);
if ($A.util.isEmpty(price)){
validItem = false;
priceField.set("v.errors", [{message:"Price can't be blank."}]);
}
else {
priceField.set("v.errors", null);
}
// If we pass error checking, do some real work
if (validItem){
// Create the new expense
console.log("Pre-Passing following to helper: " + JSON.stringify(component.get("v.newItem")));
var newItem = component.get("v.newItem");
console.log("Passing following to helper: " + JSON.stringify(newItem));
//helper.createItem(component, newItem);
var theItems = component.get("v.items");
// Copy the expense to a new object
// THIS IS A DISGUSTING, TEMPORARY HACK
newItem = JSON.parse(JSON.stringify(newItem));
console.log("before push: " + JSON.stringify(theItems));
theItems.push(newItem);
console.log("after push: " + JSON.stringify(theItems));
component.set("v.items", theItems);
// Reset the newItem
//component.set("v.newItem","{'sObjectType':'Camping_Item__c','Name':'','Quantity__c':0,'Price__c':0,'Packed__c':false }");
// component.set("v.newItem.Name","New");
}
}
})
</pre>
campingLIstHelper:
***blank***
There was two seperate issues I had:
1) When clicking the button the array "Items" would aways be filled with the same object no matter what was entered in the form. As a workaround I have line 65 of the controller commented out. I have figured out that my syntax for setting "v.newItem" was incorrect. I have double quotes around the object notation. After removing the excess quotation marks this issue was resolved.
2) The second bug I encountered was using a console.log statement that utilized component.get("v.newItem") and entereing data that would cause the validation to fail, the invalid field would not be submitted correctly until using a component.set("v.newItem", .......) statement. I"m not sure why this is needed though.