function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Chadwick SakonchickChadwick Sakonchick 

Handle Actions with Controllers - Hands-on Challenge - JS Controller not setting item attribute correctly

I've spent hours trying to figure this challenge out and finally got it working, but now when I go to 'Check' the challenge, it's not giving me the credit I deserve! The task seems pretty straightforward, but i'm sure i'm missing some code they think is necessary. Like the teacher telling you that you "solved the problem wrong" even though you got the right answer...

Error is: Challenge Not yet complete... here's what's wrong: 
The campingListItem JavaScript controller isn't setting the 'item' attribute correctly.

------ campingListItem.cmp ------
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c','Packed__c':false}"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox aura:id="checkbox" value="{!v.item.Packed__c}"/>
    </p>
    <ui:button label="Packed!" press="{!c.packItem}"/>  
</aura:component>


------ campingListItemController ------
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true);
        event.getSource().set("v.disabled",true);
    }
})
Best Answer chosen by Chadwick Sakonchick
Chadwick SakonchickChadwick Sakonchick
Ok, got it working and 'approved' by the Trailhead check. Seems that (at least in the tutorial check) it may not be proper Apex coding technique to just set the value straight out without setting the value to a variable first. Not sure exactly why, but whatever. This Controller code is what worked for me and passed:

------ campingListItemController ------
({
    packItem : function(component, event, helper) {
        var item = component.get("v.item",true);
        item.Packed__c = true
        component.set("v.item",item);
        event.getSource().set("v.disabled",true);
    }
})

All Answers

Alain CabonAlain Cabon
Hi Chad,

Try something like that: 

 var item = component.get("v.item");
  ... 
 component.set("v.item",item);

Regards

Alain
Sudipta DebSudipta Deb
Hi Alain,

You need to set the value. You can do that by -
  • Grab the UI element by - component.get("v.item") and store it into a variable.
  • Perform all your logics
  • Finally, set the value by - component.set("v.item", item);
Please accept my solution as Best Answer if my reply is helpful.
Chadwick SakonchickChadwick Sakonchick
Ok, got it working and 'approved' by the Trailhead check. Seems that (at least in the tutorial check) it may not be proper Apex coding technique to just set the value straight out without setting the value to a variable first. Not sure exactly why, but whatever. This Controller code is what worked for me and passed:

------ campingListItemController ------
({
    packItem : function(component, event, helper) {
        var item = component.get("v.item",true);
        item.Packed__c = true
        component.set("v.item",item);
        event.getSource().set("v.disabled",true);
    }
})
This was selected as the best answer
Kavya Goel 9Kavya Goel 9
({
    packItem : function(component, event, helper) {
        var item=component.get("v.item",true);
        event.getSource().set("v.disabled",true);
        }
})

try this out.
regards
kavya
GOURISHETTY SAIRAMGOURISHETTY SAIRAM
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:
        <ui:outputText value = "{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber style="currency" value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?: 
        <lightning:input type="toggle" checked="{!v.item.Packed__c}"/>
    </p>
    
    <lightning:button label="Packed!" onclick="{!c.packItem}"></lightning:button>
</aura:component>
campingListItem.cpm 



campingListItemController.js
({
	packItem: function(component, event, helper) {
        var newMessage = event.getSource().get("v.label");
        console.log("handleClick2: Message: " + newMessage);
        component.set("v.item.Packed__c", true);
        component.set("v.packed!",disabled="true");
    },
})

 
Fatma ElmaciFatma Elmaci
Write it this way or it will throw an error because JS is case sensitive.

campingListItemController.js

({ packItem: function(component, event, helper) { var newMessage = event.getSource().get("v.label"); console.log("handleClick2: Message: " + newMessage); component.set("v.item.Packed__c", true); component.set("v.Packed!",disabled="true"); }, })
Shubham guptaShubham gupta
Controller file:

({
    packItem : function(component, event, helper) 
        component.set("v.item.Packed__c", true);
        component.set("v.packed!",disabled="true");

    }
})