Hi, sorry for this dummy question. But I followed the manual for the reactive table, and it works, (the clicking in the cell) but not for the icon in the cell. I know it goes wrong because the event.target is too specific. if I click the Icon… the target is the icon, not the cell. But How to make it back to the copyApp for example?
thanks
Template.body.events({
'click .reactive-table tbody tr': function(event) {
var currentApp = this;
console.log(event);
if (event.target.className == "markAsTemplate") {
console.log('markAsTemplate app clicked: ' + currentApp.name);
TemplateApps.upsert(currentApp._id, {
$set: {
name: currentApp.name,
id: currentApp.id,
checked: !this.checked
},
});
}
//Copy APP
if (event.target.className === "copyApp") {
console.log('Copy app clicked: ' + currentApp.name);
Meteor.call('copyAppSelectedCustomers', currentApp, (error, result) => { //contains QVF guid of the current iteration over the apps
if (error) {
sAlert.error(error);
} else {
sAlert.success("QVF '" + currentApp.name + " copied in Qlik Sense via the QRS API for each of the selected customers");
updateSenseInfo();
}
}) //method call
}
Reactive table:
{
key: 'copyApp',
label: 'Copy app selected customers',
fn: function() {
return new Spacebars.SafeString('<i class="copy icon"></i>')
}
}, {
key: 'deleteApp',
label: 'Delete app',
fn: function() {
return new Spacebars.SafeString('<i class="remove circle icon"></i>')
}
}, {
key: 'markAsTemplate',
label: 'Template app for generation?',
fn: function() {
return new Spacebars.SafeString('<i class="add circle icon"></i>')
}
Thank you.I tried it but it did not work. Except my code is a bit different because of the reactive table, I use the event.target (according to his manual) to see which cell the user clicked.
Make the event selector be tr, and you’ll have your row object in this:
Template.posts.events({
'click .reactive-table tbody tr': function (event) {
// set the blog post we'll display details and news for
var post = this;
Session.set('post', post);
}
});
If you want single elements inside a row to become clickable, you still have to target tr. Otherwise this won’t refer to the corresponding object of your targeted row. With this in mind, you have to specify a target inside your ‘click .reactive-table tbody tr’ eventlistener:
Template.posts.events({
'click .reactive-table tbody tr': function (event) {
event.preventDefault();
var post = this;
// checks if the actual clicked element has the class `delete`
if (event.target.className == "delete") {
Posts.remove(post._id)
}
}
});
Hi, Could somebody please advise what to do? I just have a simple reactive table, with an extra icon in the cell. Problem is that my event is not triggered when I click the icon. the problem is that reactive table forces you to use the TR as selector, because then you have the complete object in this…
Lets say my icon is has class deleteApp then, this works (I added the class deleteApp to the icon, I hoped this would fix the issue)
Template.generation.events({
'click .deleteApp': function(event) {
console.log('delete app class clicked, value of event: ', event);
},
But issue is that this piece of code is now not executed…
//DELETE APP
if (event.target.className === "deleteApp") {
console.log('delete app clicked: ' + currentApp.name);
Meteor.call('deleteApp', this.id, (error, result) => {
if (error) {
sAlert.error(error);
console.log(error);
} else {
console.log('app removed');
sAlert.success("APP " + currentApp.name + " deleted in Qlik Sense via the QRS API");
updateSenseInfo();
}
}) //method call
} //end if delete button is clicked
Hey! I had a same problem with DataTables. The Buttons inside of the cells does not fired the event. The solution in my case was to add the event listener in the parents template instead of the template where the table is in. So maybe just wrap the template with the table with another one and add the event listener there.
Cool, thank you, and what did your listener look like?
Can I listen On the td class deleteApp click event?
And can I get the current object of my iteration somehow? I a normal loop I can use THIS in my event helper. But if I now use the parent template this will not work I guess?
