I have problems with inserting data to collection, it says in console: Error invoking Method 'addReservation': Internal server error [500]
This is my reservation template:
<template name="reservations">
<div class="container-fluid registration-form">
<form class="new-reservation">
<div class="row">
<input type="text" name="title"/>
</div>
<button type="submit" class="btn btn-success">Add reservation</button>
</form>
<div class="row">
<div class="col-md-6">
<ul class="list-inline">
{{ #each reserve}}
{{ >reservationForm }}
{{/each}}
</ul>
</div>
</div>
</div>
<template name="reservationForm">
<li>{{title}}</li>
</template>
And this is js file:
NewReservations = new Mongo.Collection('reserve');
in isClient:
Template.reservations.helpers({
reserve: function(){
return NewReservations.find();
}
});
Template.reservations.events({
'submit .new-reservation': function(event){
var title = event.target.title.value;
Meteor.call("addReservation", title);
event.target.title.value = "";
return false;
}
})
and this is isServer
Meteor.methods({
addReservation: function(title){
NewReservations.insert({
title: title
});
}
})
I deleted insecure and autopublish.
your server console says that NewReservations is not defined, which implies that your server is not finding this variable/database. The only possible problem i see is that you've not defined your database in the both scope. I mean you might have defined your db in client side or server side only.
basically you need to put
NewReservations = new Mongo.Collection('reserve');
outside of Meteor.isClient and Meteor.isServer block.
Related
I am trying to use a button to update a property of an Object in Vue. The Object is returned by an AJAX query to a database, and the isFetching boolean is then set to false, which attaches the containing div to the DOM. When I try and update the property, I get the following error:
TypeError: Cannot read property '_wrapper' of undefined
Below is my AJAX code:
axios.post("/api/myEndpoint", { id: router.currentRoute.query.id })
.then((response) => {
this.activities = response.data.activities;
this.isFetching = false;
})
.catch((errors) => {
console.log(errors);
router.push("/");
});
Here is my HTML:
<div v-if="isFetching">
<h2>Loading data...</h2>
</div>
<div v-else>
<div class="row no-gutters">
<div class="col">
<div class="d-flex flex-row justify-content-center">
<h4>Activities</h4>
</div>
<div class="custom-card p-2">
<div class="row no-gutters pb-4" v-for="(activity, index) in activities"
:key="activity.stage_id">
<button v-if="!activity.is_removed" class="btn custom-btn" :class="{'hov':
index == 0}" :disabled="index != 0"
#click="markRemoved(activity)">Remove</button>
</div>
</div>
</div>
</div>
</div>
Finally, here is markRemoved() as called by the button's click listener:
markRemoved(a) {
a.is_removed = true;
}
When I try and log a in markRemoved() the Object is logged to the console fine, exactly as expected. Having stepped through it in the debugger, the exception is thrown at the point I try and update the is_removed property of the Object.
Does anyone know what I'm doing wrong here?
Note: the id I pass to the AJAX query is a query parameter of Vue Router. This is also set correctly and passed as expected.
Here is an example activity Object:
{date_time_due: "2020-12-09T11:43:07.740Z"
date_time_reached_stage: "2020-12-02T11:43:07.740Z"
is_complete: true
is_removed: false
selected_option: "Some text"
stage_id: 1
stage_name: "Some text"}
The exception is only thrown on the first click of the button.
Posting in case anybody else comes across this error in the future.
Vue requires exactly one root element within a single-file component's <template> tags. I had forgotten about this and in my case had two <div> elements, shown one at a time, conditionally using v-if:
<template>
<div v-if="fetchingData">
<h2>Loading data...</h2>
</div>
<div v-else>
<!-- The rest of the component -->
</div>
</template>
This caused problems with Vue's reactivity, throwing the error whenever I tried to update some part of the component. After realising my mistake, I wrapped everything in a root <div>. This solved the issue for me:
<template>
<div id="fixedComponent">
<div v-if="fetchingData">
<h2>Loading data...</h2>
</div>
<div v-else>
<!-- The rest of the component -->
</div>
</div>
</template>
I am working with ngx-tags-input in my form which allows me to add tags. I'm quite surprised because I am already using cors. See.
package.json
"dependencies": {
"cors": "^2.8.5"
...
}
server.js
const cors = require('cors');
...
app.use(cors());
Here is my simple form
ask.component.html
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm (keydown.enter)="$event.preventDefault()">
<div class="form-group">
<!-- some other input field -->
</div>
<div class="form-group">
<ngx-tags-input class="form-control input-lg" [ngModelOptions]="{standalone: true}" [(ngModel)]="makeNewQuest.tags" id="my-tags" name="tags"></ngx-tags-input>
</div>
<button class="btn btn-primary mt-3 mb-3" (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
I am using (keydown.enter)="$event.preventDefault()" to prevent form submit on enter key because tags are separated by enter key. Instead, my form gets submitted on click event on button.
Here is my ts file for the same component
onSubmit() {
console.log("clicked onSubmit");
var titleFromField = "Demo title";
var content = "Demo content";
var askedby = localStorage.getItem('firstname') + " " + localStorage.getItem('lastname');
var date = new Date().toUTCString();
this.makeNewQuest.qtitle = titleFromField;
this.makeNewQuest.qcontent = content;
this.makeNewQuest.date = date;
this.makeNewQuest.askedby = askedby;
console.log(this.makeNewQuest);
this._auth.pushNewQuest(this.makeNewQuest)
.subscribe(
res => {
//console.log(res);
this._router.navigate(['/discussions']);
},
err => console.log(err)
);
}
Everything looks good but data is not pushed to mongodb. I'm getting cors error.
PS: I have uploaded some important file on github
This Error occurs as your app is not running on the same domain as your service. You need to configure your Server to accept those calls by adding the ‘Access-Control-Allow-Origin’ Header.
I'm developing an app using Meteor Framework.
One of the features I am looking to implement is having a marquee text (like a scrolling bottom text).
I have added the package meteor-jquery-marquee and it works great with a single string. But whenever I try to modify the string, nothing happens, and it stays the same.
It's worth mentioning that I did try sessions, and it changes the text, however, the marquee animation stops, which defeats the purpose.
I have been stuck for hours trying to get it to work, some help would really save my butt here.
I've initialized the global variable in the client/main.js as
globalMessage = "Welcome to my proJECT";
And it scrolls with the marquee just fine.
Thank you in advance!
My code:
My body template
<template name="App_Body">
{{> Header}}
{{>Template.dynamic template=main}}
{{> Footer}}
<div style="color: white;" class="ui center aligned container">
<div class='marquee'>{{globalMessage}}</div>
</div>
</template>
body.js
Template.App_Body.helpers({
globalMessage () {
return globalMessage;
},
});
where I'm trying to edit the marquee:
<template name="dailyMessageControl">
<div class="container">
<br>
<br>
<div class="info pull-right"> <!-- column div -->
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h1 class="panel-title text-center panel-relative"> Modify Daily Message</h1>
</div>
<div class="list-group">
<div class="list-group-item">
<p style="font-size: 30px;">Current Message: <br>{{globalMessage}}</p>
</div>
<div class="panel-footer">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Enter new messages</label>
<input type="text" name="newMsg" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="New Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div><!-- end column div -->
</div>
</template>
the .js
Template.dailyMessageControl.helpers({
globalMessage () {
return globalMessage;
},
});
Template.dailyMessageControl.events({
'submit form': function(){
event.preventDefault();
var newMsg = event.target.newMsg.value;
globalMessage = newMsg;
}
});
Your code clearly lacks reactivity, let's fix that.
Fist, initialize globalMessage as ReactiveVar instance (client/main.js):
globalMessage = new ReactiveVar('Welcome to my proJECT');
Next, code to react to its value change (body.js):
Remove globalMessage() helper
Add code that will track globalMessage variable and re-create $.marquee:
Template.App_Body.onRendered(function appBodyOnRendered() {
this.autorun(() => {
const value = globalMessage.get();
const $marquee = this.$('.marquee');
$marquee.marquee('destroy');
$marquee.html(value);
$marquee.marquee(); // add your marquee init options here
});
});
And, lastly, update code in dailyMessageControl template to work with ReactiveVar instance:
Template.dailyMessageControl.helpers({
globalMessage () {
return globalMessage.get(); // changed line
},
});
Template.dailyMessageControl.events({
'submit form': function(){
event.preventDefault();
var newMsg = event.target.newMsg.value;
globalMessage.set(newMsg); // changed line
}
});
This is my meteor template:
{{#each p}}
<div class="cpl">
<div class="chat-post">
<li class="post">
<div class="nm" id={{_id}}>
<a>{{username}}</a>
</div>
<div class="con">{{content}}</div>
<div class="cnm">
<div class="t">{{time}}</div>
<div class="m" id="cm">
<a>message </a>
</div>
</div>
</li>
</div></div>
{{/each}}
//TEMPLATE FOR PF
<template name="pf">
<form id="post-box">
<textarea id="new" required></textarea>
<button type="submit">Post</button>
</form>
</template>
//THIS IS MY HELPERS AND EVENT HANDLERS FOR PF AND PC,COLLECTION NAME ROST
Template.pc.helpers({
p: function(){
return Rost.find({}, {sort:{created:-1}});
}
});
Template.pf.events({
'submit form': function(event){
event.preventDefault();
var content= document.getElementById('new').value;
var date= new Date(),
h=(date.getHours()<10?'0':'') +date.getHours(),
m=(date.getMinutes()<10?'0':'')+date.getMinutes();
var time=h+':'+m;
var username= Meteor.user().username;
Rost.insert({
content: content,
created:date,
time:time,
username: username
});
event.target.reset();
}
});
I am using meteor and mongo as DB where {{username}}, {{content}} and {{time}} are variables of object.
How can I access {{username}} using JavaScript?
Inside your helper function, you should already have access to this data via the this context variable, or Template.instance().data. Your event handler should look like:
'click cssSelector'(event,instance) {
event.preventDefault();
}
As you can see, the second parameter is the template instance, so you have access to the data with instance.data, or you use event.currentTarget to determine the element that was click on and go from there. Please post your helpers or event handling code so that we can see what you are trying do and having problem with.
I am writing a messaging app which has a delete / edit function for a user for a given message that is submitted. What I would like to do is write something like:
{{#if currentUser._id === this._id}}
<!-- Show -->
{{/if}}
But this is probably wrong I have a template written for the message record:
<template name="message">
<div class="row message-row">
<div class="col-md-12">
<div class="message-container">
<div class="message-avatar">
<img src="{{userAvatar}}">
</div>
<p>{{message}}</p>
<div class="message-time">{{prettifyDate time}}</div>
<!-- this is the div to hide / show based on the conditional -->
<div class="message-controls">
<button class="btn btn-link btn-xs" type="button" id="deleteMessage"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link btn-xs" type="button" id="editMessage"><i class="fa fa-edit"></i></button>
</div>
<!-- end -->
</div>
</div>
</div>
</template>
And I am using the following in my client.js
Template.messages.messages = function() {
return Messages.find({}, { sort: {time: -1} });
}
But at this point I am stuck
Assuming your message documents have a userId field, you can simply do this:
Template.message.helpers({
isOwner: function() {
return this.userId === Meteor.userId();
}
});
and:
{{#if isOwner}}
<!-- controls -->
{{/if}}
You could also make a more flexible, reusable global helper for this:
Template.registerHelper('isCurrentUser', function(userId) {
return userId === Meteor.userId();
});
<!-- in this example, the document might have an `ownerId` field rather than `userId` -->
{{#if isCurrentUser ownerId}}{{/if}}
Of course, you also need to validate the updates on the server with the allow/deny API or with custom methods.