We Keep Coding

Problem trying to select next item in JQuery

I'm trying to select the next element to add the class image-radio-selected with JQuery.
My html is like
<div id="photocall">
#foreach ($photocalls as $photocall)
<div class="d-inline-block mx-1">
<div style="background-image: url('')" class="photocallThumb image-radio-selected"></div>
</div>
#endforeach
<input>
</div>
Im trying to:
$( "#mybutton" ).on("click", function() {
var selected = $('.photocallThumb.image-radio-selected'); // working
selected.next('.photocallThumb').addClass('image-radio-selected'); // not working
});
After 2 hours, trying to solve, reading doc,
I'm more confused than when I started...
what am I doing wrong?

One method is you will need to get out of the parent div, then do a next for the parent.
$( "#mybutton" ).on("click", function() {
var selected = $('.photocallThumb.image-radio-selected');
selected.parent(".d-inline-block").next(".d-inline-block").find('.photocallThumb').addClass('image-radio-selected'); // not working
});
.image-radio-selected{border:1px solid #ff00aa;}
.mx-1{width:100px;height:100px;border:1px solid #000000;}
.d-inline-block{display:inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="photocall">
<div class="d-inline-block mx-1">
<div style="background-image: url('')" class="photocallThumb image-radio-selected"></div>
</div>
<div class="d-inline-block mx-1">
<div style="background-image: url('')" class="photocallThumb"></div>
</div>
<div class="d-inline-block mx-1">
<div style="background-image: url('')" class="photocallThumb"></div>
</div>
<div class="d-inline-block mx-1">
<div style="background-image: url('')" class="photocallThumb"></div>
</div>
<button type="button" id="mybutton">next</button>
</div>

JQuery's next method selects the next sibling of the selected element. However, since your photocallThumb div is inside a d-inline-block div, it has no siblings. You'd have to go back up a level, then find the next photocallThumb, maybe something like selected.parent().find('.photocallThumb').eq(0).
However, an even better pattern that will help you avoid bugs like these is called templating. Basically, on the client side, you have an html template string, and you pass it data that represent your current state. In your case, you'd pass it an array of javascript objects, each one with an image url and an isSelected boolean. Then, when your state changes, instead of using jquery to try to fix what's changed, you just rerender your template and replace your html element's content with the newly rendered template, and it's now magically in the correct state. This is the pattern favored by large frameworks like React and Angular.
Here's an example from lodash that renders a list of usernames:
// Use the "evaluate" delimiter to execute JavaScript and generate HTML.
var compiled = _.template(
`<% _.forEach(users, function(user) { %>
<li><%- user %></li>
<% }); %>`);
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'

Deeply nested dynamic templates loses scope of parents

I'm attempting to use a dynamic template to create a virtual number pad; this works by passing rows of buttons to another template that renders them. The issue I'm having is the template cannot use Templates.parentData() to access the context as it becomes undefined. Moving up in the inheritance by using Templates.parentData(2) or (3) does not function either.
Template.bs_num_pad.helpers({
'number_rows' : function(){
var result = [];
console.log(this);
console.log(Template.currentData());
// true
console.log(Template.parentData(1));
// Template viewName="Template.bs_num_pad"
console.log(Template.parentData(-2));
// true
console.log(Template.parentData(-3));
// true
}
});
<!-- begin snippet: js hide: false -->
<template name="bs_num_pad">
<div class="container bsNumPadNumber">
<span style="display:block;text-align:center;">{{getBsNumPadNumber}}</span>
{{#each number_rows}}
<div class="col-3">
{{>bs_buttonset}}
</div>
{{/each}}
</div>
</template>
The number pad template that references another template to generate the bootstrap buttonset.
<template name="bs_buttonset">
{{!Template.dynamic template="bs_buttonset" data=difficultyOptions }}
<div class="btn-group btn-group-md" style="text-align:center;display:inline-block;" role="group">
{{#each this}}
<button id="{{btnId}}" value={{value}} class="btn {{btnClass}}" type="button">
{{#if btnIcon}}<i class="glyphicon {{btnIcon}}"></i>{{/if}}{{#if btnText}}{{btnText}}{{/if}}
</button>
{{/each}}
</div>
</template>
Template.parentData(-2) should return the contents of optionsModal; instead it returns 'true'.

Select element with jquery inside a handlebars each iteration

I'm building for exercise a e-shop. I'm displaying a list of product in the HTML, using handlebars.
For every element I'm adding a button that should allow the user to add the item in the shopping cart. It's not working because every time I click on the button I add all the list and not only the single object.
So I know that I'm passing all the list (because I pass 'list' as argument), I was wondering how pass only the current item for every button. I'm not sure how to do it.
html:
<div class="container-fluid">
<script id="list-items" type="text/x-handlebars-template">​
{{#each list}}
<div class="items col-lg-3 col-md-4 col-sm-6 col-xs-12">
Category: {{ category}} </br>
Name: {{ name }} </br>
Price: {{ price }} </br>
Quantity: {{ quantity }}
<button class="addItem" class="btn">Buy</button>
</div>
{{/each}}
</script>
</div>
javascript:
var ShoppingCart = function () {
this.cart = [];
};
ShoppingCart.prototype.addItem = function(item) {
this.cart.push(item);
};
shoppingCart = new ShoppingCart();
$('.addItem').click(function() {
shoppingCart.addItem(list);
});

In your click function you add exactly the whole list:
shoppingCart.addItem(list);
And you do not need to transfer the whole item to be added. As you already have the whole list in the scope, you just need to let your function know what was the selected index.
Possible solution could be to add index by handlebars into button id and then parse it in jQuery and proceed or consider replacing jQuery way to subscribe to on-click event with pure javascript solution and insert the index of the item withe help of handlebars, in the way:
<button class="addItem" class="btn" onclick="addItem({{#index}})">Buy</button>
Where addItem is:
function addItem(index) {
shoppingCart.addItem(list[index]);
}

I guess you could sort this out with an item ID (or index as pointed out elsewhere) :
<button id="{{ #index }}" class="addItem" class="btn">Buy</button>
$('.addItem').click(function() {
shoppingCart.addItem(list[$(this).id]);
});

Meteor, how to set context data in template event function

I would like to set context data in an event handler that inserts new uploaded photos to the image FScollection. What I want to set is the newly generate id of the photo file. I need to pass this id to a child template to do further processing. Below is the code I am working with:
How should I define data I want to use later in an event handler?
images.js
Template.Profile.events({
'change #uploadBtn': function(event, template) {
var name = $("#uploadBtn").val();
$("#uploadFile").val(name);
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function (err, fileObj) {
if (err){
// handle error
}
else {
//here I want to set fileObj._id as data for further usage.
}
});
});
}
});
Template.imageView.helpers({
images: function () {
return Images.findOne({_id: this.imageId});
}
});
Template.imageView.events({
'click #deleteBtn': function (event) {
this.remove();
}
});
template file
images.html
<template name="Profile">
<input id="uploadFile" placeholder="Choose File" disabled="disabled" style="cursor: auto; background-color: rgb(235, 235, 228); "/>
<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input id="uploadBtn" type="file" name="…" class="upload">
</div>
{{> imageView}}
</template>
<template name="imageView">
<div class="imageView">
{{#if images}}
<div style="width: 120px;height: 120px;margin-bottom: 30px;">
<div style="float: middle;">
{{#with images}}
<button id="deleteBtn" type="button" class="btn btn-primary" >Delete</button>
{{/with}}
</div>
<a href="{{images.url}}" target="_blank" >
<img src="{{images.url}}" alt="" class="thumbnail" style="width: 96px; height: 96px;"/>
</a>
</div>
{{/if}}
</div>
</template>

You have a couple choices.
Include the _id of the image in the object that is referring to it
Include the _id of the object in the image itself as parentId or similar
For the first case, in the callback from Image.insert use the _id of the image and then do a .update() on the parent object (is this a user perhaps?) to include a reference to the image. If you're allowing multiple images then you might want to update an array with those _ids.
In the second case you can update the object you just inserted in the callback from the insertion with the parentId that you need.
Then you just need to include the appropriate clause in your query for the dependent images and thanks to reactivity it will update automatically.

Meteor using different Sessions with {{#each}} for click event

I want to use different Sessions for a specific click event within a {{#each}} block. The problem is that HTML elements will be displayed for all {{#each}} block members, but I only want it for the one, a user performs the click event on.
Here is my code:
...
{{#each articles}}
<tr id="{{_id}}" class="article-row">
<td class="articles">
{{> article}}
</td>
</tr>
{{/each}}
...
<template name="article">
{{#if editArticle}}
<div class="input-group">
<span class="input-group-addon">Edit article</span>
<input type="text" name="edit-article-input" class="form-control" placeholder="Name your article." value="{{title}}">
<span class="input-group-btn">
<button class="btn btn-success glyphicon glyphicon-ok edit-article-submit" data-type="last"></button>
</span>
</div>
{{else}}
<div class="panel panel-default article">
<div class="panel-heading">
<h3 class="panel-title">{{title}}</h3>
</div>
<div class="panel-body">
<button class="glyphicon glyphicon-pencil btn btn-default btn-xs edit-article"></button>
</div>
</div>
{{/if}}
</template>
Helper methods and events:
Template.article.helpers({
editArticle: function() {
return Session.equals('editArticle', true);
}
});
In the template with the {{#each}} block I use this helper method:
'click .edit-article': function(e, t) {
e.preventDefault();
Session.set('editArticle', true);
}
Now the problem is, that if I click on the button .edit-article the {{#if editArticle}} block appears on every article. I just want it for the one I clicked on.
Any help would be greatly appreciated.

This is a perfect example of how Session isn't always the right tool for the job when it comes to template reactivity. Unless you actually need to know which article is being edited outside of the template, I'd strongly recommend using a ReactiveVar or ReactiveDict rather than a global variable like Session. It's a little more to write but, in my opinion, a much more encapsulated and elegant solution. Here's the outline of the code you'd need:
Template.article.created = function() {
this.isEditing = new ReactiveVar(false);
};
Template.article.events({
'click .edit-article': function(e, template) {
e.preventDefault();
template.isEditing.set(true);
},
submit: function(e, template) {
e.preventDefault();
template.isEditing.set(false);
}
});
Template.article.helpers({
editArticle: function() {
return Template.instance().isEditing.get();
}
});
Note that you'd need to do meteor add reactive-var for this to work. For more details, see my post on scoped reactivity.