function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Hasmukh Jain 2Hasmukh Jain 2 

The campingListItem JavaScript controller isn't setting 'Packed' value correctly....

Hi All,

I am not able to complete the challenge "Mark Item as Packed" getting error message  The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.

Below is the code, please help


<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <aura:attribute name="buttonDisabled" type="String" default="false"/>

    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Name:
        <ui:outputText  value="{!v.item.Name}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    
    <ui:button label="Packed!" press="{!c.packItem}" disabled="{! v.buttonDisabled}" />
    
</aura:component>

({
    packItem : function(component, event, helper) {
        component.set("v.item", { 'sobjectType': 'Camping_Item__c','Packed__c': true });
        component.set("v.buttonDisabled", "true");  
    }
})

 
Guiomar Fernández de BobadillaGuiomar Fernández de Bobadilla
Try this:
In controller.js :
({
    packItem : function(component, event, helper) {
        var checkbox = component.get("v.item",true);
        checkbox.Packed__c = true;
        component.set("v.item",checkbox);
        event.getSource().set('v.disabled', true);
        
    }
})
Rodrigo RESENDIZRodrigo RESENDIZ
Hi!
This is what worked for me 
({
	packItem : function(component, event, helper) {
        var checkbox = component.get("v.item");
        checkbox.Packed__c = true;
        component.set("v.item",checkbox );
        event.getSource().set("v.disabled", true);		
	}
})

Regards!
 
Gayatri Keshkamat 3Gayatri Keshkamat 3
Hi,

Instead of the 3 lines below :

3        var checkbox = component.get("v.item");
4        checkbox.Packed__c = true;
5        component.set("v.item",checkbox );

why can't we use the following?
component.set("v.item.Packed__c", true);

Thanks.

 
brijesh yadav 57brijesh yadav 57
Pls Try 
({
    packItem : function(component, event, helper) {
        
        
        var checkbox = component.get("v.item");
        checkbox.Packed__c = true;
        component.set("v.item",checkbox );
        var buttonclicked=event.getSource();
        buttonclicked.set("v.disabled","true");
        
        
    }
})
Kamal Kishore SinghKamal Kishore Singh
Component 

<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:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    
     <div>
        <ui:button label="Packed!" disabled="false"  press="{!c.packItem}"/> 
 
        
    </div>
</aura:component>

Controller

({
    packItem : function(component, event, helper) {
//var checkbox = component.get("v.item.Packed__c");
       // checkbox.Packed__c = true;
        component.set("v.item.Packed__c",true );
        var buttonclicked=event.getSource();
        buttonclicked.set("v.disabled","true");
        
    }
})
George CartmanGeorge Cartman
Thanks guys. The answers by Guiomar and Rodrigo helped me. Not to hijack their answers, but for what it's worth, I preferred thinking about it like so:
1. Get the campingListItem
2. Modify the attribute on it to set the value to true
3. Set the campingListItem back  
({
	packItem : function(component, event, helper)  {
	    // Get the campingListItem from the component
        var campingListItem = component.get("v.item");
        // Now set the checkbox on the campingListItem to true
        campingListItem.packed__c = true;
        // Now set the item back back onto the component
        component.set("v.item", campingListItem);

        event.getSource().set("v.disabled", "true");		
	}
})

 
Poesy Chen - GmailPoesy Chen - Gmail
Looks like they changed the button requirement to lightning button.  See below:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
        <p>Name:<ui:outputText value="{!v.item.Name}"/></p>
        <p>Price:<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>    
        <p>Quantity<lightning:formattedNumber value="{!v.item.Quantity__c}" style="integer"/></p>
        <p>Packed:<lightning:input type="toggle" checked="{!v.item.Packed__c}"/></p>
    <div>
        <lightning:button label="Packed!" disabled="false"  onclick="{!c.packItem}"/>        
    </div>
</aura:component>
Jaspreet Kaur 10Jaspreet Kaur 10
It works,
packItem: function(component, event, helper) {
        var a = component.get("v.item",true);
        a.Packed__c = true;
        component.set("v.item",a);
        var btnClicked = event.getSource();
        var btnMessage =btnClicked.get("v.Packed!");
        btnClicked.set("v.disabled",true);
lovedeep Singhlovedeep Singh
Below worked for me to pass the challenge.
Component:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
        <p>Name:<ui:outputText value="{!v.item.Name}"/></p>
        <p>Price:<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>    
        <p>Quantity<lightning:formattedNumber value="{!v.item.Quantity__c}" style="integer"/></p>
        <p>Packed:<lightning:input type="toggle" checked="{!v.item.Packed__c}"/></p>
    <div>
        <lightning:button label="Packed!" disabled="false"  onclick="{!c.packItem}"/>        
    </div>
</aura:component>

Controller:
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true );
        var buttonclicked=event.getSource();
        buttonclicked.set("v.disabled","true");
        
    }
})
Anant KamatAnant Kamat
Just the below line should be more than enough
component.set("v.item.Packed__c", true);
clinto Thomas 1clinto Thomas 1
<lightning:button
    label="Packed!"
    aura:id = "packedButton1"
    variant="Neutral"
    title="Packed!"
    onclick="{!c.packItem}"
  />


({
  packItem: function (component, event, helper) {
    component.set("v.item.Packed__c", true);
    let packedButton = component.find("packedButton1");
    component.set(packedButton.disabled, true);
  }
});
you can directly set the value of attribute using component.set("v.item.Packed__c", true); and define a aura:id attribute inside your button component and find the element using the id inside your js method and update the 'disable' attribute to true .