We Keep Coding

Write new select2 option tags to local database in express

I am using select2 in an express app to make an input box where users can select subjects from a list, and can update this list with any newly added options.
The thing I'm struggling with is that select2 runs client-side, whereas any data I use to seed my <option> tags (that I want to append new options to) is server-side.
I want users to be able to add subjects that don't exist in the original list, so that future users will be presented with newly added options (as well as the original ones)
These are the options I've considered for achieving this (in increasing desirability):
Add new <option>Subject</option> html tags for each added tag
Push new tags to an array, and seed the <option>s from this array
Seed the <option> from a json object, and update this object on tag creation
Seed the <option> from an external database (e.g. mongoose), and update this on tag creation
As far as I can see, all of these options require that my client-side code (select2-js) talks to server-side code (where my array, .json file or mongoose schema would be), and I have no idea how to go about doing this.
In my current approach I am attempting to to specify a "local" json file as my data source in my select2 call (see here). However, this doesn't seed the database with any options, so this isn't working as I expected.
I then check if each new tag exists in an array (dataBase), and add it to the database if not:
// Data to seed initial tags:
var dataBase = [
{ id: 0, text: 'Maths'},
{ id: 1, text: 'English'},
{ id: 2, text: 'Biology'},
{ id: 3, text: 'Chemistry'},
{ id: 4, text: 'Geography'}
];
$(document).ready(function() {
$('.select2-container').select2({
ajax: {
url: '../../subjects.json',
dataType: 'json',
},
width: 'style',
multiple: true,
tags: true,
createTag: function (tag) {
var isNew = false;
tag.term = tag.term.toLowerCase();
console.log(tag.term);
if(!search(tag.term, dataBase)){
if(confirm("Are you sure you want to add this tag:" + tag.term)){
dataBase.push({id:dataBase.length+1, text: tag.term});
isNew = true;
}
}
return {
id: tag.term,
text: tag.term,
isNew : isNew
};
},
tokenSeparators: [',', '.']
})
});
// Is tag in database?
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
return true
}
}
return false
};
However, this approach will add the new tags to an array that is destroyed once I refresh the page, and new tags are not stored.
How can I modify this to load server-side data (json, mongoose document or anything else that is considered a best practice), and update this data with newly added options (that pass my tests)?

On your server-side, you can have an api that maintains and returns the tag array.
If you want the array to persist even after server shutdown, you can store the tags array in a database.
Server side:
let dataBase = [
{ id: 0, text: 'Maths'},
{ id: 1, text: 'English'},
{ id: 2, text: 'Biology'},
{ id: 3, text: 'Chemistry'},
{ id: 4, text: 'Geography'}
];
//Assuming you have a nodejs-express backend
app.get('/tags', (req,res) => {
res.status(200).send({tags: dataBase});
} );
Client Side:
$(document).ready(function() {
dataBase=[];
$.get("YOUR_SERVER_ADDRESS/tags", function(data, status){
console.log("Data: " + data + "\nStatus: " + status);
dataBase = data;
});
$('.select2-container').select2({
data: dataBase,
placeholder: 'Start typing to add subjects...',
width: 'style',
multiple: true,
tags: true,
createTag: function (tag) {
var isNew = false;
tag.term = tag.term.toLowerCase();
console.log(tag.term);
if(!search(tag.term, dataBase)){
if(confirm("Are you sure you want to add this tag:" + tag.term)){
dataBase.push({id:dataBase.length+1, text: tag.term});
isNew = true;
//Update the tags array server side through a post request
}
}
return {
id: tag.term,
text: tag.term,
isNew : isNew
};
},
tokenSeparators: [',', '.']
})
});
// Is tag in database?
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
return true
}
}
return false
};

You can use select2:select and select2:unselect event for this.
var dataBase = [{
id: 0,
text: 'Maths'
},
{
id: 1,
text: 'English'
},
{
id: 2,
text: 'Biology'
},
{
id: 3,
text: 'Chemistry'
},
{
id: 4,
text: 'Geography'
}
];
$(document).ready(function() {
$('.select2-container').select2({
data: dataBase,
placeholder: 'Start typing to add subjects...',
width: 'style',
multiple: true,
tags: true,
createTag: function(tag) {
return {
id: tag.term,
text: tag.term,
isNew: true
};
},
tokenSeparators: [',', '.']
})
$(document).on("select2:select select2:unselect", '.select2-container', function(e) {
var allSelected = $('.select2-container').val();
console.log('All selected ' + allSelected);
var lastModified = e.params.data.id;
console.log('Last Modified ' + lastModified);
var dbIdArray = dataBase.map((i) => i.id.toString());
var allTagged = $('.select2-container').val().filter((i) => !(dbIdArray.indexOf(i) > -1))
console.log('All Tagged ' + allTagged);
});
});
.select2-container {
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<select class="select2-container"></select>

Here's what I've ended up with (thanks to both answers):
1. Set up a Mongoose DB to hold subjects:
models/subjects.js
var mongoose = require("mongoose");
var SubjectSchema = new mongoose.Schema({
subject: { type: String },
});
module.exports = mongoose.model("Subjects", SubjectSchema);
2. Set up api routes in node js express backend:
routes/api.js
var express = require("express");
var router = express.Router();
var Subjects = require("../models/subjects");
// GET route for all subjects in db
router.get("/api/subjects/all", function(req, res){
Subjects.find().lean().exec(function (err, subjects) {
return res.send(JSON.stringify(subjects));
})
});
// POST route for each added subject tag
router.post("/api/subjects/save", function(req, res){
var newSubject = {};
newSubject.subject = req.body.subject;
console.log("Updating db with:" + newSubject);
var query = {subject: req.body.subject};
var options = { upsert: true, new: true, setDefaultsOnInsert: true };
// Find the document
Subjects.findOneAndUpdate(query, options, function(error, subject) {
if (error) return;
console.log("Updated db enry: " + subject);
});
return res.send(newSubject);
});
3. Set up select2 input field:
public/js/select2.js
var dataBase=[];
$(document).ready(function() {
// Get all subjects from api (populated in step 2) and push to dataBase array
$.getJSON('/api/subjects/all')
.done(function(response) {
$.each(response, function(i, subject){
dataBase.push({id: subject._id, text: subject.subject});
})
console.log("dataBase: " + dataBase);
})
.fail(function(err){
console.log("$.getJSON('/api/subjects/all') failed")
})
// Get data from api, and on 'selecting' a subject (.on("select2:select"), check if it's in the dataBase. If it is, or the user confirms they want to add it to the database, send it to POST route, and save it to our Subjects db.
$('.select2-container')
.select2({
ajax: {
url : "/api/subjects/all",
dataType: 'json',
processResults: function (data) {
return {
results: $.map(data, function(obj) {
return { id: obj._id, text: obj.subject };
})
};
}
},
placeholder: 'Start typing to add subjects...',
width: 'style',
maximumSelectionLength: 5,
multiple: true,
createTag: function(tag) {
return {
id: tag.term,
text: tag.term.toLowerCase(),
isNew : true
};
},
tags: true,
tokenSeparators: [',', '.']
})
.on("select2:select", function(e) {
if(addSubject(dataBase, e.params.data.text)){
console.log(e.params.data.text + " has been approved for POST");
ajaxPost(e.params.data.text)
} else {
console.log(e.params.data.text + " has been rejected");
var tags = $('#selectSubject select').val();
var i = tags.indexOf(e.params.data.text);
console.log("Tags: " + tags);
if (i >= 0) {
tags.splice(i, 1);
console.log("post splice: " + tags);
$('select').val(tags).trigger('change.select2');
}
}
})
function ajaxPost(subject){
console.log("In ajaxPost");
var formData = {subject : subject}
$.ajax({
type : "POST",
contentType : "application/json",
url : "/api/subjects/save",
data : JSON.stringify(formData),
dataType : 'json'})
.done(console.log("Done posting " + JSON.stringify(formData)))
.fail(function(e) {
alert("Error!")
console.log("ERROR: ", e);
});
}
function addSubject(subjects, input) {
if (!input || input.length < 3) return false
var allSubjects = [];
$.each(subjects, function(i, subject){
if(subject.text) allSubjects.push(subject.text.toLowerCase())
});
console.log("Here is the entered subject: " + input);
if(allSubjects.includes(input)){
console.log(input + " already exists")
return true
}
if(confirm("Are you sure you want to add this new subject " + input + "?")){
console.log(input + " is going to be added to the database");
return true
}
console.log(input + " will NOT to added to the database");
return false
}
});
This works, but I would love to hear feedback on this approach!

I get an error **Error invoking Method 'addReview': Internal server error [500]

If I try to add reviews or like a recipe I get an error Error invoking Method 'addReview': Internal server error [500] debug.js:41,even though it adds reviews and likes into databases and works fine but still gives me above error.
Source code Github
add_review.js
Template.add_review.events({
'submit .add-review':function(event){
event.preventDefault();
var rating = event.target.rating.value;
var review = event.target.review.value;
var recipeId = Router.current().data()._id;
Meteor.call('addReview',rating,review,recipeId);
}
});
Template.recipes.events({
"click [data-action='addLikes']": function (event) {
event.preventDefault();
var recipe = Recipes.findOne({_id: this._id});
Meteor.call('upvote',recipe)
}
});
client/methods.js
Meteor.methods({
addReview:function(rating,review,recipeId){
if(review!=""){
Reviews.insert({
rating:rating,
review:review,
recipeId:recipeId
});
Router.go('reviews',{_id:recipeId});
FlashMessages.sendSuccess('Review Added',{ autoHide: true, hideDelay: 2000 });
}
else{
FlashMessages.sendError('Review field is empty',{ autoHide: true, hideDelay: 3000 });
}
return false;
},
upvote:function(currentRecipe){
var user = Meteor.user();
if(!user){
FlashMessages.sendError("You need to login to like this recipe", {hideDelay: 1000});
}
if (currentRecipe) {
if (_.contains(currentRecipe.voters, Meteor.userId())) {
FlashMessages.sendError("You already liked this recipe", {hideDelay: 1000});
return false;
}
Recipes.update(currentRecipe._id, {$addToSet: {voters: Meteor.userId()}, $inc: {likes: 1}});
}
}
})
server/permissions.js
RecipesImages.allow({
insert: function(userId, doc) {
return true;
},
update: function(userId, doc, fieldNames, modifier) {
return true;
},
remove: function(userId, doc) {
return false;
},
download: function(userId,doc) {
return true;
},
fetch: null
});
Recipes.allow({
insert: function(userId, doc) {
return true;
},
update: function(userId, doc, fieldNames, modifier) {
return true;
}
});
Reviews.allow({
insert: function(userId, doc) {
return true;
},
update: function(userId, doc, fieldNames, modifier) {
return true;
}
});

It seems that you are trying to use methods where they are not needed and only make things harder. Isn't this all just client code? If so, you can just use functions:
add_review.js
Template.add_review.events({
'submit .add-review':function(event){
event.preventDefault();
var rating = event.target.rating.value;
var review = event.target.review.value;
var recipeId = Router.current().data()._id;
addReview(rating,review,recipeId);
}
});
Template.recipes.events({
"click [data-action='addLikes']": function (event) {
event.preventDefault();
var recipe = Recipes.findOne({_id: this._id});
upvote(recipe)
}
});
client/methods.js
addReview = function(rating,review,recipeId){
if(review!=""){
Reviews.insert({
rating:rating,
review:review,
recipeId:recipeId
});
Router.go('reviews',{_id:recipeId});
FlashMessages.sendSuccess('Review Added',{ autoHide: true, hideDelay: 2000 });
}
else{
FlashMessages.sendError('Review field is empty',{ autoHide: true, hideDelay: 3000 });
}
return false;
};
upvote = function(currentRecipe){
var user = Meteor.user();
if(!user){
FlashMessages.sendError("You need to login to like this recipe", {hideDelay: 1000});
}
if (currentRecipe) {
if (_.contains(currentRecipe.voters, Meteor.userId())) {
FlashMessages.sendError("You already liked this recipe", {hideDelay: 1000});
return false;
}
Recipes.update(currentRecipe._id, {$addToSet: {voters: Meteor.userId()}, $inc: {likes: 1}});
}
};

#Waqar First off, in your methods.js file, which as someone else has already told you should go in the /lib folder, you should have single quotes around your function name. I've re-written your code for Meteor.methods and for the Template.add-review.events below
client/templates/reviews/add_review.js (sorry, I put each template in a separate folder along with the js file for it)
Template.add_review.events({
'submit .add-review': function(event){
var rating = event.target.rating.value;
var review = event.target.review.value;
var recipeId = this._id;
var params = {
rating: rating,
review: review,
_id: recipeId
}
Meteor.call('addReview', params);
FlashMessages.sendSuccess('Review Added'); // and any other options you want to include
Router.go('reviews',{_id:recipeId});
return false;
}
});
/lib/methods.js
Meteor.methods({
'addReview': function(params){
Reviews.insert(params);
}
});
Give that a try and see if it works. Also, put your methods.js file in the /lib folder as Stephen suggested.

Backbone fetch producing 404 error

I have the following backbone model node that I am trying to use to fetch data from the server but at the moment I get a 404 error, I have checked my files and they seem to be correct
var app = app || {};
app.NotesModel = Backbone.Model.extend({
url:'/usernotes',
defaults: {
username:'',
email:'',
about:'',
editorNote:''
}
});
app.NotesView = Backbone.View.extend({
el:'#notes',
events: {
'click #save': 'save'
},
template1: _.template($('#about').html()),
template2: _.template($('#facts').html()),
initialize: function() {
app.NotesModel = new app.NotesModel({});
var email = $('#data-user').text();
app.NotesModel.fetch({data: {email: email},type:'GET' });
this.render();
},
render: function() {
},
This is what the route file looks like
app.get('/account/usernotes/', require('./views/account/usernotes/index').init);
app.get('/account/usernotes/:email', require('./views/account/usernotes/index').find);
and the functions for the routes
'use strict';
exports.init = function(req, res){
if (req.isAuthenticated()) {
//console.log(req.user.email);
res.render('account/usernotes',
{ data : {
user : req.user.email
}
});
}
else {
res.render('signup/index', {
oauthMessage: '',
oauthTwitter: !!req.app.config.oauth.twitter.key,
oauthFacebook: !!req.app.config.oauth.facebook.key,
oauthGoogle: !!req.app.config.oauth.google.key
});
}
};
exports.find = function(req,res) {
console.log('here');
console.log(JSON.stringify(req));
}
Doing the console.log() doesn't give me any output at all.

Here is a similar question.
Try this:
app.NotesModel.fetch({data: $.param({email: email}) });
or this:
app.NotesModel.fetch({data: {email: email}, processData: true });

Meteor js .allow list not showing

I am trying to implement the .allow part of meteor in an application I'm building. Before introducing it a list was displaying comments a user entered, now the comments just flash up for a second and then disappear. The comments are still being added to the collection though.
Could anyone tell me what I'm doing wrong, I am very new to this.
Main js file:
if (Meteor.isClient) {
Meteor.startup(function () {
Meteor.subscribe("ques");
});
Template.compose.events({
'submit form': function (event) {
var $body = $('#que-body');
var $score = 1;
event.preventDefault();
Questions.insert({
body: $body.val(),
score: $score,
created_at: Date()
});
$body.val('');
}
});
Template.question.selected = function () {
return Session.equals("selected_question", this._id) ? "selected" : '';
};
Template.question.events({
'click': function () {
Session.set("selected_question", this._id);
}
});
Template.question.que = function(){
return Questions.findOne(Session.get("selected"));
};
// Deals with up-vote, down-vote, remove buttons
Template.list.events({
'click .icon-thumbs-up': function(event) {
Questions.update(Session.get("selected_question"), {$inc: {score: 1}});
},
'click .icon-thumbs-down': function(event) {
Questions.update(Session.get("selected_question"), {$inc: {score: -1}});
},
'click .icon-remove': function(event) {
Questions.remove(Session.get("selected_question"));
}
});
Template.list.questions = Questions.find({}, {sort: {score: -1, created_at: -1}});
}
if (Meteor.isServer) {
Meteor.startup(function () {
Meteor.publish("ques", function(){
return Questions.find({}, {
fields:{ }
})
});
});
}
The model.js file:
Questions = new Meteor.Collection("questions");
Questions.allow({
insert: function(userId, que){
return userId && que.owner === userId;
},
update: function(id, ques, fields, modifier){
return true;
},
remove: function(id, que){
return id && que.owner === id;
}
});

Do you mean the questions (you said comments?): Your Meteor.allow rule is basically something that says the question.owner is the current logged in user's _id. You need to insert an owner when you insert your question. This is the only way (que.owner === userId will return true):
Questions.insert({
owner: Meteor.userId(),
body: $body.val(),
score: $score,
created_at: Date()
});
Make sure you ensure that only logged in users have the chance to insert questions. Either by hiding the button or having a check just before everything is inserted too:
if(!Meteor.userId()) {
alert("You need to be logged in to post a question");
return;
}

Login Handling in Backbone.js

i need a very simple login system for my web application with backbone.js
Workflow:
App Start -> LoginView -> When Logged In -> App
Here is my solution. What can i do better?
Login Status Model:
window.LoginStatus = Backbone.Model.extend({
defaults: {
loggedIn: false,
userId: null,
username: null,
error: "An Error Message!"
},
initialize: function () {
_.bindAll(this, 'getSession', 'setStorage');
},
getSession: function (username, password) {
var tmpThis = this;
$.getJSON('http://requestURL.de/getSession.php?username=' + username + '&password=' + password, function(data) {
if (data != null) {
tmpThis.setStorage(data.id, data.username);
$.mobile.changePage("#home");
}
});
},
setStorage: function(userId, username) {
localStorage.setItem("userId", userId);
localStorage.setItem("username", username);
this.set({ "loggedIn" : true});
}
});
Here is my Login View:
window.LoginView = Backbone.View.extend({
el: $("#login"),
initialize:function () {
this.render();
},
events: {
"click input[type=submit]": "onSubmit"
},
onSubmit: function(event) {
var username = $(this.el).find("#user-username").val(),
password = $(this.el).find("#user-password").val();
this.model.getSession(username, password);
return false;
},
render:function () {
if (this.model.get("loggedIn")) {
var template = _.template( $("#login_template").html(), {} );
} else {
var template = _.template( $("#login_template").html(), { "error" : this.model.get("error") } );
}
$(this.el).html( template );
}
});

My suggestion to you is making the login outside the backbone app and only after a success login process let them access the "single page app"

You can refer to this backbone project which does the login request using POST method. https://github.com/denysonique/backbone-login