In one template, I have:
<template name="moviesTemplate">
<form>
<ul>
{{#each movies}}
<li>
{{title}} <input id="{{title}}" type="submit" value="Delete" />
</li>
{{/each}}
</ul>
</form>
</template>
When the user clicks Delete on the moviesTemplate, I want to find the id property of the input element from within the event in my javascript file:
Template.moviesTemplate.events = {
'submit': function (e, tmpl) {
e.preventDefault();
var theId = theButtonThatRaisedTheEvent.id.toString(); // <--- This is what I'm referring to
}
}
How can I find this element? I thought it was 'e', but I can't seem to get any Id out of it. Perhaps I misunderstand...
Edit 1:
Okay, so it seems that 'e' is the event, which doesn't contain any information related to the source element. How else do I go around accomplishing this? Do I need to rethink about how I'm doing this?
To me it sounds like the id belongs to the form, and not to the submit button. I would use the following:
<template name="main">
<form data-id="anId">
<input type="submit" value="Delete!">
</form>
</template>
Template.main.events({
'submit form': function(event, template){
event.preventDefault() // Don't submit it!
var id = event.currentTarget.getAttribute('data-id') // Get the id attribute.
console.log(id)
}
})
Update
Replace the template you have now with:
<template name="moviesTemplate">
<ul>
{{#each movies}}
<li>
<form data-id="{{title}}">
{{title}} <input type="submit" value="Delete" />
</form>
</li>
{{/each}}
</ul>
</template>
And use the event handler previously written in this post.
Actually, this
inside the event handler will be the context of the movie, so the handler can simply be:
Template.main.events({
'submit form': function(event, template){
event.preventDefault() // Don't submit it!
var id = this.title // Get the title through the context.
console.log(id)
}
})
so there's no need using the data-id
attribute on the form.
Unfortunately; it's not that straightforward.
A starting point would be similar to this answer However you may want to handle things like "enter" key being pressed on element
Template.moviesTemplate.events = {
'click input[type=submit]': function(e, tmpl){
tmpl.find('input[type=submit]').data('clicked',false);
$(e.currentTarget).data('clicked',true);
},
'submit': function (e, tmpl) {
e.preventDefault();
var theId = tmpl.find('input[type=submit]').filter(function(i,ele){
return $(ele).data('clicked');
}).get(0).attr('id');
}
}
Use tmpl.find
and grab id
:
Template.moviesTemplate.events = {
'submit':function(e, tmpl){
e.preventDefault();
},
'click input[type="submit"]':function(e, tmpl){
console.log(e.currentTarget.id)
}
}
You can create a single submit form event, and you conditionally check the event target field. Call appropriate Meteor method based on the collection you are inserting into.
Template.detailsViewTemplate.events({
'submit form': function(ev){
ev.preventDefault();
var detail_input_field = template.$('#detail_entry');
var message_input_field = template.$('#message_entry');
if(detail_input_field != undefined){
var detailFormData = {
detail: $(ev.target).find('[name = detail]').val(),
parentId: $(ev.target).find('[name = parentId]').val(),
checkboxStatus: ''
}
Meteor.call('addDetail', detailFormData);
$('.form-group').children().val('');
} else if(message_input_field != undefined){
var newMessageData = {
listId: this.params_id,
message: $(ev.target).find('[name = message]').val()
}
Meteor.call('addMessage', newMessageData);
$('.form-group').children().val('');
}
}
}