You need to sign in to do that
Don't have an account?
Ashish Narkhede 13
Lightning Trailhead: The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.
Hi,
I am trying to finish Handle Actions with Controllers section iin Lightning components trailhead. My code works as asked in the challenge.
But I still get this error:
Challenge Not yet complete... here's what's wrong:
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.
<aura:component >
<aura:attribute name='item' type='Camping_Item__c' required='true' default="{Name:'Torch', Price__c: 10, Quantity__c: 1, Packed__c: false}"></aura:attribute>
<aura:attribute name='disabled' type='Boolean'></aura:attribute>
<ui:outputText value='{!v.item.Name}'></ui:outputText>
<ui:outputCheckbox value="{!v.item.Packed__c}"></ui:outputCheckbox>
<ui:outputCurrency value="{!v.item.Price__c}"></ui:outputCurrency>
<ui:outputNumber value="{!v.item.Quantity__c}"></ui:outputNumber>
<ui:button press='{!c.packItem}' disabled='{!v.disabled}' label='Packed!'></ui:button>
</aura:component>
({
packItem : function(component, event, helper) {
var item = component.get('v.item');
component.set('v.item.Packed__c', true);
var btnPackItem = event.getSource();
btnPackItem.set('v.disabled', true);
}
})
I am trying to finish Handle Actions with Controllers section iin Lightning components trailhead. My code works as asked in the challenge.
But I still get this error:
Challenge Not yet complete... here's what's wrong:
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.
<aura:component >
<aura:attribute name='item' type='Camping_Item__c' required='true' default="{Name:'Torch', Price__c: 10, Quantity__c: 1, Packed__c: false}"></aura:attribute>
<aura:attribute name='disabled' type='Boolean'></aura:attribute>
<ui:outputText value='{!v.item.Name}'></ui:outputText>
<ui:outputCheckbox value="{!v.item.Packed__c}"></ui:outputCheckbox>
<ui:outputCurrency value="{!v.item.Price__c}"></ui:outputCurrency>
<ui:outputNumber value="{!v.item.Quantity__c}"></ui:outputNumber>
<ui:button press='{!c.packItem}' disabled='{!v.disabled}' label='Packed!'></ui:button>
</aura:component>
({
packItem : function(component, event, helper) {
var item = component.get('v.item');
component.set('v.item.Packed__c', true);
var btnPackItem = event.getSource();
btnPackItem.set('v.disabled', true);
}
})
The challange would not accept
<ui:button press='{!c.packItem}' label='Packed!'></ui:button>
I made the following minor change and was able to complete the challange
<<ui:button label='Packed!' press='{!c.packItem}'></ui:button>
thanks
Hello,
Even I got the same error :
Challenge Not yet complete... here's what's wrong:
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.
Putting Label before Press also doesn't works in my case. If someone can help me with this.
Here's my code :
And the Controller Code :
Change the controller code from
var item = component.get("v.item");
to
var item = component.get("v.item",true);
It works !!
I am still getting the same error. I have checked the component and controller code through a lightning app, and it's working fine. But when clicking on 'Check Challenge' on the trailhead page, getting the error. Below is my code sample
app code:
campingListItem componenet code
campingListItemController.js code
screenshots
if anyone can check what is the issue in this code, it will be very helpful.
Thanks!
Just use the <lightning:button ...> component and it will work.
Like this : If above code fixed you problem please mark this is best answer.
Best Regards
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" default="{
'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>
<div>
<lightning:button label="Packed!" onClick="{!c.packItem}"/>
</div>
</aura:component>
Controller.js
({
packItem : function(component, event, helper) {
var abc = component.get("v.item",true);
abc.Packed__c = true;
component.set("v.item",abc);
var btnClicked = event.getSource();
btnClicked.set("v.disabled",true);
}
})
Please mark it as best answer:)
<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}" style="integer"/>
</p>
<p>
<lightning:input type="toggle"
name="Packed"
label="Packed:"
checked="{!v.item.Packed__c}"
/>
</p>
</aura:component>
CMP
<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="number"/>
</p>
<p>Packed:
<lightning:input type="toggle" label="Packed" name="packed" checked="{!v.item.Packed__c}"/>
</p>
</aura:component>
JS
({
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);
}
})
<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="number"/>
</p>
<div>
<lightning:button label="Packed!" onClick="{!c.packItem}"/>
</div>
</aura:component>
I got same error and non of above solutions worked with me. The issue cause is in the tag <ui:button> which shouldn't be used in the excercise.
Replace the <ui:button> tag with <lightning:button>
Component:
Controller:
It Worked for me :) :
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"
default="{Name:'Pen', Price__c:50, Quantity__c:10, Packed__c:false}"/>
<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}"
messageToggleActive="Yes"
messageToggleInactive="No"/>
</p>
</aura:component>
Controller Function Code :
it'll work for you
Fail tags <ui:
Correct work replace all marks <ui: -> to <lightning:
Regards.
I'm struggling with the code to this challenge. Already tried several changes and follow some answers from this topic, but I still have problems with it. Below, the code that I wrote:
Component:
<aura:component>
<aura:attribute name="item" type="Camping_Item__c" required = "true"
default = "{'sobjectType': 'Camping_Item__c', 'Name':'Torch', 'Price__c': 10, 'Quantity__c': 1, 'Packed__c': false}"/>
<div>
<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 press='{!c.handleClick}' label='Packed!'/>
</aura:component>
Controller:
({
handleClick : function(component, event, helper) {
var a = component.get("v.item", true)
var btnClicked = event.getSource();
btnClicked.set("v.disable", true);
component.set("v.item", a);
}
})
App:
<aura:application >
<c:campingListItem/>
</aura:application>
Can any one help with this?
Thanks
({
packItem : function(component, event, helper) {
//var a = component.get("v.item",true);
//a.Packed__c = true;
component.set("v.item.Packed__c",true);
component.set("v.disabled",true);
}
})
<aura:component >
<aura:attribute type="Camping_Item__c" name="item" required="true"/>
<aura:attribute type='boolean' default = "false" name="disabled"/>
<lightning:formattedText title="Name" value='{!v.item.Name}' />
<lightning:formattedNumber title="Price" value='{!v.item.Price__c}' style="currency"/>
<lightning:formattedNumber title="Quantity" value='{!v.item.Quantity__c}' />
<lightning:input type="toggle"
label="Packed ?"
name="Packed "
checked="{!v.item.Packed__c }" />
<lightning:button label="Packed!" title="Pack Item" onclick="{! c.packItem }" name="btn" disabled='{!v.disabled}'/>
</aura:component>
I have currently completed this course in my trailhead and this is my Campainitemlist component and controller
This works definitely.
Component
<aura:component >
<aura:attribute name="item" type="Camping_Item__c"
required="true"
default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:true}"
/>
<p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>
<ui:outputText value="{!v.item.Name}"/>
<lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD" currencyDisplayAs="symbol"/>
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
<lightning:button name="packed" label="Packed!" onclick="{!c.packItem}" disabled="false" />
</aura:component>
Controller
({
packItem : function(component, event, helper) {
component.set('v.item.Packed__c',true);
var btnClicked = event.getSource();
btnClicked.set("v.disabled",true);
}
})