Hi,
I am getting this uncaught type error to get the input price from the product template. It works on the first product from the list, but can't get the second product price from the list.
Please see code for reference.
``
Product.html
<template name="product">
<div class="listing-container">
<div class="hotel">
<h4 class="text-left">
<span class="label label-warning">{{name}}</span>
</h4>
<img src="{{img}}" alt="AppleCrisp" class="img-responsive"/>
<div class="caption">
<div class="row">
<div class="col-md-6 col-xs-6">
<h6>{{name }}</h6>
</div>
<div class="col-md-6 col-xs-6 price">
<h4><label>${{price}}</label></h4>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="rating">
<i class="{{ratings 1 rating}} fa fa-star"></i>
<i class="{{ratings 2 rating}} fa fa-star"></i>
<i class="{{ratings 3 rating}} fa fa-star"></i>
<i class="{{ratings 4 rating}} fa fa-star"></i>
<i class="{{ratings 5 rating}} fa fa-star"></i>
</div>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span>buy</a></div>
</div>
<p> <input type="text" id="price"> </p>
</div>
</div>
</div>
</template>
****************
category.html
<template name="category">
<h1>{{categoryName}}</h1>
{{#each products}}
{{>product}}
{{/each}}
</template>
<template name="categoryAdmin">
<div class="col-md-12">
<div class="col-md-6 form-group">
<label class="control-label">Category Name</label>
<input type="text" id="categoryName" class="form-control input-sm"/>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button class="btn btn-info btn-md">
<i class="fa fa-database addCategory">
Add Category
</i>
</button>
</div>
</div>
</div>
</div>
</template>
*********************
product.js
Template.product.events({
'click .btn-product':function(evt,tmpl){
console.log(tmpl.find('#price').value); <---------this is getting uncaught typeError: on the second product of the list
Meteor.call('Product.AddtoCart',this._id,1);
}
});`indent preformatted text by 4 spaces`Can you edit your post to use proper Discourse (markdown) code formatting? (e.g. indent by 4 spaces) We can’t make things out.
Done, thank you! Pls help me resolve this error.
Can someone help with this pls? Don’t know why the second input value for the list not working.
Without looking very closely I see that you are allowing multiple id="price" in your template, which is not strictly allowed (use class="price" instead?).
Even though the docs for find specify that it’s based off the template root, there maybe an issue there?
2 Likes
@robfallows nailed it - here’s a quick example that re-creates your error and shows how to fix it (runnable app here).
demo.html
<body>
<h1>Broken Products</h1>
{{#each products}}
{{> badProduct}}
{{/each}}
<h1>Working Products</h1>
{{#each products}}
{{> goodProduct}}
{{/each}}
</body>
<template name="badProduct">
<div>
<button>Buy!</button>
<input type="text" id="price" value="5">
</div>
</template>
<template name="goodProduct">
<div>
<button>Buy!</button>
<input type="text" class="price" value="5">
</div>
</template>
demo.js:
if (Meteor.isClient) {
Template.body.helpers({
products() {
return [ 'product 1', 'product 2' ];
}
});
Template.badProduct.events({
'click button': (event, instance) => {
console.log(instance.find('#price').value);
}
});
Template.goodProduct.events({
'click button': (event, instance) => {
console.log(instance.find('.price').value);
}
});
}
2 Likes
Awesome, thank you for your help!
I also figured out why access the second product id=“price” is given me the uncaught type errror. Seems like I have to create an unique id value for each product like id=“price_1” and id=“price2” etc… I don’t have such problem using other framework.