Apex Code Development You need to sign in to do that
Don't have an account?
Sagar Wanaselja The campingListItem JavaScript controller isn't disabling the button correctly
While working through the Trailhead for Lightning Components Basics - Handle Actions with Controllers, I got to the Check Challenge and got stumped because the system was telling me:
The campingListItem JavaScript controller isn't disabling the button correctly
I was fairly certain this message was incorrect. I even built a app that used an aura:iteration to display a group of c:campingListItem instances, and my approach was indeed disabling the button when you click on it, as specified.
My approach:
<!-- campingListItem.cmp -->
...
<ui:button label="Packed!" disabled="{!v.item.Packed__c}" press="{!c.packItem}"/>
// campingListItemController.js
({
packItem : function(component, event, helper) {
var item = component.get("v.item");
item.Packed__c = true;
component.set("v.item", item);
}
})
But it turns out the Trailhead Check Challenge doesn't expect you to use an expression (in markup) for the disabled attribute of the ui:button, it expects you to set the disabled attribute in the javascript controller:
// campingListItemController.js
({
packItem : function(component, event, helper) {
var item = component.get("v.item");
item.Packed__c = true;
component.set("v.item", item);
var btnClicked = event.getSource();
btnClicked.set("v.disabled", true);
}
})
Does anyone have an opinion or insight on this? Should Check Challenge be changed to expect either approach?
The campingListItem JavaScript controller isn't disabling the button correctly
I was fairly certain this message was incorrect. I even built a app that used an aura:iteration to display a group of c:campingListItem instances, and my approach was indeed disabling the button when you click on it, as specified.
My approach:
<!-- campingListItem.cmp -->
...
<ui:button label="Packed!" disabled="{!v.item.Packed__c}" press="{!c.packItem}"/>
// campingListItemController.js
({
packItem : function(component, event, helper) {
var item = component.get("v.item");
item.Packed__c = true;
component.set("v.item", item);
}
})
But it turns out the Trailhead Check Challenge doesn't expect you to use an expression (in markup) for the disabled attribute of the ui:button, it expects you to set the disabled attribute in the javascript controller:
// campingListItemController.js
({
packItem : function(component, event, helper) {
var item = component.get("v.item");
item.Packed__c = true;
component.set("v.item", item);
var btnClicked = event.getSource();
btnClicked.set("v.disabled", true);
}
})
Does anyone have an opinion or insight on this? Should Check Challenge be changed to expect either approach?
change your component with this code
campingListItem.cmp
<aura:component >
<aura:attribute name="item" type="Camping_Item__c"/>
<p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>
<p>Name:
<ui:outputText value="{!v.item.name}" />
</p>
<p>Quantity:
<ui:outputNumber value="{!v.item.Quantity__c}" />
</p>
<p>Price:
<ui:outputCurrency value="{!v.item.Price__c}" />
</p>
<p>Packed?:
<ui:outputCheckbox value="{!v.item.Packed__c}" />
</p>
<p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>
</p>
</aura:component>
campingListItemController.js
({
packItem : function(component, event, helper) {
var a = component.get("v.item",true);
a.Packed__c = true;
component.set("v.item",a);
var btnClick = event.getSource();
btnClick.set("v.disabled",true);
}
})
and try again.
Thanks
let me inform if it work.and mark it best answer if its helps you :)
Thanks! But I guess I wasn't clear enough. I *already* tried your suggested fix, and that worked. My question is, should I really have to do it that way? The way I originally tried also appears to be correct, and in my opinion, it is actually BETTER, since using
<ui:button label="Packed!" disabled="{!v.item.Packed__c}" press="{!c.packItem}"/>
makes the button disabled no matter HOW the item "packed" field got set. (assuming these items are eventually going to come from the DB)
The suggested fix that Check Challenge likes only disables the button in response to the user clicking on that one button.
So, unless I'm wrong about this, I want someone to handle this as a bug in Trailhead and fix it.
Trailhead isn't looking for elegant solutions but checking basic and fundamental code.
As a novice to components and javascript, I found it hard enough to figure out how to disable the button even in this simple exercise (but many thanks for your question as it provided the answer!).
Perhaps Trailhead could describe your alternative approach as a suggested enhancement but I don't think it needs to test for it.
campingListItem.cmp
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<p>Name:
{!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}"/></p>
<p>
<lightning:input type="toggle"
label="Packed:"
name="packed"
checked="{!v.item.Packed__c}" />
</p>
<div>
<lightning:button label="Packed!" onclick="{!c.packItem}"/>
</div>
</aura:component>
campingListItemController.js
({
packItem : function(component, event, helper) {
component.set("v.item.Packed__c",true);
event.getSource().set("v.disabled",true);
}
})