Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PrincyPrincy 

Problem with Lightning Components Basics --> Handle Actions with Controllers challenge

Hey guys!!
Anyone there completed this challenge?
I've tried a number of ways and finally succeeded by writing the folloeing code:

campingListItem.cmp:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
    <aura:attribute name="disabled1" type="Boolean" default="false" />
    <p><ui:inputCheckbox value="{!v.item.Packed__c}"/></p>
    <ui:button label="Packed!" press="{!c.packItem}" disabled="{!v.disabled1}"/>
</aura:component>

campingListController.js

({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true);
        component.set("v.disabled1", true);
    }
})
It's working fine on my browser but on checking challenge, I get:
Challenge Not yet complete... here's what's wrong:
The campingListItem JavaScript controller isn't disabling the button correctly.

Can't understand what's going wrong. Also tried by other ways like:
component.set(true, event.getSource().get("v.disbaled"));
OR
component.set(event.getSource().get("v.disbaled"), true);
ETC..
None of them seems to be working fine.
 
Best Answer chosen by Princy
Sitarama MurthySitarama Murthy
hi Princy,

try using this code:
.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default="{'sObjectType':'Camping_Item__c',
                                                                'Name':'Item1',
                                                                'Quantity__c':10,
                                                                'Price__c':100,
                                                                'Packed__c':false}"/>
    <p><ui:outputText value="{!v.item.Name}" /></p>
    <p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <p><ui:button label="Packed!" press="{!c.packItem}"/></p>
</aura:component>

controller:

({
    packItem : function(component, event, helper) {
        
        var a = component.get("v.item");
        a.Name = 'Item2';
        a.Quantity__c = 20;
        a.Price__c = 200;
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
        
    }
})

All Answers

Sitarama MurthySitarama Murthy
hi Princy,

try using this code:
.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default="{'sObjectType':'Camping_Item__c',
                                                                'Name':'Item1',
                                                                'Quantity__c':10,
                                                                'Price__c':100,
                                                                'Packed__c':false}"/>
    <p><ui:outputText value="{!v.item.Name}" /></p>
    <p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <p><ui:button label="Packed!" press="{!c.packItem}"/></p>
</aura:component>

controller:

({
    packItem : function(component, event, helper) {
        
        var a = component.get("v.item");
        a.Name = 'Item2';
        a.Quantity__c = 20;
        a.Price__c = 200;
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
        
    }
})
This was selected as the best answer
PrincyPrincy
Thanks Ram! It worked. :)
Mike VermaceMike Vermace
And you had misspelled "disabled" (is disbled in your code).  While I haven't tried I beleive your code would work with spelling fixed.