I’m using Bootstrap and Meteor and trying to make form submit working properly within a popover. Sometimes I got records duplication on Mongodb and debugging it looks like submit gets fires more than once. I’m not sure that it depends on Meteor, but could be. This is my code:
Template.header.onRendered(function() {
$("#sneak-preview-btn").popover({
container: 'body',
template: '<div class="popover work-journals-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
animation: true,
placement : 'right',
html : true,
delay: { "show": 500, "hide": 100 },
trigger : 'manual',
content : function() {
var popTitle = "<h5>Peek last 5 activities completed by your team mates.</h5>";
var formAddEntry = "<form id='add-entry'><div class='form-group'><input id='entry' name='entry' type='text' class='form-control' placeholder='Add a new task you completed'/></div></form>";
var entriesLimit = 5;
var htmlEntryList = "";
var myEntries = WorkJournals.find({userId : Meteor.userId()}, {sort : {createdAt : -1}, limit : entriesLimit}).fetch();
if (myEntries) {
htmlEntryList ="<div class='scroll-journal-entries'><ul>";
myEntries.map(function(en) {
htmlEntryList += libGetHtmlJournalEntry(en);
});
htmlEntryList += "</ul>";
var companyUsers = Profiles.find({companyId : libGetCompanyIdFromUser(Meteor.userId())}, {fields : {userId : 1}}).fetch();
companyUsers.filter(function(user) {
if (user.userId !== Meteor.userId())
htmlEntryList += libGetHtmlJournalEntries(user.userId, entriesLimit);
});
htmlEntryList += "</div>";
}
return "<div>" + popTitle + formAddEntry + "<p>" + htmlEntryList + "</p><button id='close-sneak-preview' type='button' class='btn btn-default btn-xs pull-right'>Close</button><br>" + "</div>";
}
});
//manage lost focus
$(document).on('blur', '.popover', function(e) {
e.preventDefault();
$("#sneak-preview-btn").popover('hide');
});
//manage submit
$(document).on('submit', '#add-entry', function(e) {
e.preventDefault();
WorkJournals.insert({
companyId: Profiles.findOne({userId : Meteor.userId()}).companyId,
userId : Meteor.userId(),
entryText : $('#entry').val(),
createdAt : new Date().getTime()
});
$("#sneak-preview-btn").popover('hide');
libShowAlert('messages-heading-row', 'A completed task was added to your activity log', 'alert-nice');
});
$(document).on('click', "#close-sneak-preview", function() {
$("#sneak-preview-btn").popover('hide');
});
});
You can get more information here on stackoverflow ─ where I posted this problem a few days ago.