I need to move to a different URL, within the application, making the :id part of the URL from a form. Basically, once someone enters a code in a form and submits it, I need to move to another route including that code.
import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra'
import './search.html';
import './restaurants.js';
Template.body.events({
'submit .search-restaurant'(event) {
// Prevent default browser form submit
//event.preventDefault();
// Get value from form element
const target = event.target;
const postCode = target.text.value;
FlowRouter.go('/restaurants/{{postCode}}');
//Meteor.setTimeout(function() {FlowRouter.go('restaurants.show'), { postCode: postCode }}, 100)
//FlowRouter.go('restaurants.show');
//target.text.value = '';
},
});
And this is the form:
<template name="search">
<p> Enter your postcode to see restaurants around you </p>
<form class="search-restaurant">
<input type="text" placeholder="4169" />
</form>
</template>
You should build your URL using template literals:
const postCode = target.text.value;
FlowRouter.go(`/restaurants/${postCode}`);
This will resolve an input named foo to /restaurants/foo, so :id will be "foo" then.
As an addition to Jankapunkt's answer, you can pass the id to go in an options object:
FlowRouter.go('restaurants.show'), { id: postCode });
I can see that you tried that on this line:
//Meteor.setTimeout(function() {FlowRouter.go('restaurants.show'), { postCode: postCode }}, 100)
But if your route uses :id, then you need to pass an object with the key id.
Also, you are missing a close bracket after : postcode } before the function close, so that might also be why that didn't work
Related
I am getting this error when I try to build a reactive form for creating a new password form.I have mentioned the source code below and when I remove the source code part then there is no error but without that my operation is not working as well. I think I have to add or delete something in my source code to get the desired output
main.ts:12 TypeError: Cannot read property 'value' of null
at FormGroup.passwordShouldMatch [as validator] (password.validators.ts:18)
at FormGroup._runValidator (forms.js:4089)
at FormGroup.updateValueAndValidity (forms.js:4050)
at new FormGroup (forms.js:4927)
at FormBuilder.group (forms.js:8924)
at new ChangePasswordComponent (change-password.component.ts:15)
at createClass (core.js:31987)
at createDirectiveInstance (core.js:31807)
at createViewNodes (core.js:44210)
at callViewAction (core.js:44660)
static passwordShouldMatch(control : AbstractControl) {
let newPassword = control.get('newPassowrd');
let confirmPassword = control.get('confirmPassowrd');
if (newPassword.value !== confirmPassword.value){
return { passwordShouldMatch:true };
return null;
}
}
As you didn't add any code snippet I am considering your form structure is something like this.
this.fb.group({
newPassowrd: [''],
confirmPassowrd: [''],
});
here, you include an custom validation function called passwordShouldMatch and this function looks fine. So, I assume that you did something wrong when you set the validator to that form group.
this.fb.group({
newPassowrd: [''],
confirmPassowrd: [''],
}, { validator: this.passwordShouldMatch});
this is how you should set the validation function for the form group. And in html your form should be something like this.
<form [formGroup]="form" novalidate (ngSubmit)="onSubmit(survey)">
<input type="text" placeholder="Untitled form" formControlName="newPassowrd">
<input type="text" placeholder="Untitled form" formControlName="confirmPassowrd">
<span *ngIf="form.hasError('passwordShouldMatch')">not match</span>
</form>
everything should work this way. Here is the working version of stackblitz
I am learning mongodb with meteor js so dont have much knowledge of both mongodb and meteor.
Below is the js code:
import { Template } from 'meteor/templating';
import { Dbs } from '../lib/collections.js';
import './main.html';
Template.body.helpers({
/*temp1:[
{text:'my data1'}'
{text:'my data1'}
]*/
dbs(){
return Dbs.find({'user_id':'p123'});
}
});
Basically i just want to pass user id in a textbox and based on it,i want to display the other details of user.In above code i am passing it manually and its working.anyone suggest me what should i do here ?
You can attach to the template instance a ReactiveVar that you will update with an event.
Then use it inside the helper, so the helper will re-execute everytime the value change:
Template.myTemplate.onCreated(function() {
this.currentTextBox = new ReactiveVar();
});
Template.myTemplate.events({
"keyup .js-my-textbox"(event, instance) {
// This event is executed when you type in an input with the class "js-my-textbox"
instance.currentTextBox.set(event.target.value);
},
});
Template.myTemplate.helpers({
dbs() {
const instance = Template.instance();
return Dbs.find({'user_id': instance.currentTextBox.get() });
},
});
EDIT:
Example of what could be the html part:
<template name="myTemplate">
<input type="text" placeholder="Search" class="js-my-textbox">
{{#each db in dbs}}
<-- Do what you want, example: -->
<p>{{db.myField}}</p>
{{/each}}
</template>
First You Create Event Function Template.body.events({}) to access text .Then store variable to use Meteor Session. Then Variable easily access helpers.If session changes variable will be changed.
I'm working on an app that contains send/cancel request functionality.
I have the following code:
import React, { Component, PropTypes } from 'react';
import { Events } from '../../api/collections/events.js';
import { Visitors } from '../../api/collections/visitors.js';
import { createContainer } from 'meteor/react-meteor-data';
class Event extends Component {
handleDelete() {
Event.remove(this.props.event._id);
}
requestInvite() {
let eid = Events.findOne(this.props.event._id).title;
Visitors.insert({
visitor_id: Meteor.userId(),
visitor_email: Meteor.user().emails[0].address,
event_name: eid,
})
// did it to debug function, returns correct value
console.log(Visitors.findOne({id: this._id}) + ', ' + Meteor.userId());
}
cancelInvite() {
Visitors.remove(this.props.visitor._id);
}
render() {
const visitor = this.props.visitor.visitor_id;
const length = Visitors.find({}).fetch().length;
return (
<div>
{this.props.event.owner == Meteor.userId() ?
<div>
<img src={this.props.event.picture} />
<span>{this.props.event.title}</span>
<button onClick={this.handleDelete.bind(this)}>Delete</button>
</div>
</div> :
<div>
<div>
<img src={this.props.event.picture} />
<span>{this.props.event.title}</span>
<div>
{ length > 0 && visitor == Meteor.userId() ?
<button onClick={this.cancelInvite.bind(this)}>Cancel Request</button>
:
<button onClick={this.requestInvite.bind(this)}>Request invite</button>
}
</div>
</div>
</div>
}
</div>
)
}
}
Event.propTypes = {
event: PropTypes.object.isRequired,
};
export default createContainer(() => {
return {
event: Events.findOne({id: this._id}) || {},
visitor: Visitors.findOne({id: this._id}) || {},
};
}, Event)
It works quite simple, this component shows action buttons depend on user's status (if the current user hosts this event, it shows delete related functionality and so one, I just keep is as simple as it can be for this example). If the current user isn't this event's hoster, component lets this user to send (and cancel) a request for invite. Okay, everything works as it should but only for the first user clicked on Send Request button and after that ich changes to Cancel Request (I use different browsers to test cases like this). The rest of users can also click on Send Request but for them it doesn't change to Cancel Request (but it still adds correct document to Visitors collection, also I have a component which displays all the visitors and the data is corret, i.e ids, emails and event titles). By the first time I thought it's an issue with findOne function, but I don't think so because console.log(Visitors.findOne({id: this._id}) + ', ' + Meteor.userId());'s output stays correct giving me current user's id and just created visitor's id which are the same for each case. Also I found a very strange behaviour. When the app rebuilds, send/cancel functionality works as it suppossed to for every single user.
I think I'm kinda close for the solution but need a little gotcha to do it.
Any help would be highly appreciated!
UPD
It's obvious that my question isn't full without describing Visitor document being created in this component. Here it is:
{
"_id": "Qbkhm9dsSeHyge4rT",
"visitor_id": "qunyJ4sXNfz2w8qeR",
"visitor_email": "johndoe#gmail.com",
"event_name": "test",
}
So as you can see I grab visitor_id from Meteor.userId() and that's why I'm using this.props.visitor.visitor_id to check if currently logged in user's id is equal to a particular visitor's id.
Solution
The problem was with my query to fetch visitor's ids in createContainer function. I changed it to visitor = Visitors.findOne({visitor_id: Meteor.userId()}) and it worked the way I described.
Without knowing how your Visitors collection documents are structured, it's difficult to say for sure; however, it seems that your condition for visitor == Meteor.userId() is the issue since you said that the documents are correctly being added to the Visitors collection, which would make length > 0 return true.
The issue could be that you are setting const visitor = this.props.visitor.visitor_id; rather than say const visitor = this.props.visitor._id;.
I have two separate form input's (both text type), one in template A, and one in template B. Template A invokes template B. All the specific names/properties of these two input form's are unique. I have event handlers for both, within their own properly named Template.name.events().
When I build a very simple test case of this, no problems, everything works fine. But in my larger and more complex actual app, when I enter text into the template B form, the correct template B submit event handler gets invoked. And then...the template A submit event handler gets invoked! This happens even when I do nothing but an event.PreventDefault call in handler B (side question: are event handlers ever invoked for reactive reasons, or strictly "event occurred" reasons?). I am able to work around this odd behavior for the moment by checking in the A event handler for an undefined name property and just exiting if that's the case, but that's just a kludge for something wrong somewhere. Any suggestions as to a likely culrprit for this odd behavior in my code? Thanks!
Here's the code for the two templates in the failing case; the first (entryHall, with the "new-room" form input) is the "A" template, the second (knock, with the "knock-room" form input) the "B" template. Underneath the event handling code for those two templates is the html+handlebars code for the template definitions and invocations. Sorry for the verbosity and lack of a simpler failing case!
Template.entryHall.events({
// NEW ROOM REQUEST PROCESSING
"submit.new-room": function (event) {
event.preventDefault();
if (event.target.roomName === undefined) {
console.log ("in submit new room and roomname in event is undefined");
return;
}
var rName = event.target.roomName.value;
// Is there already a room name of this same name in the Rooms collection?
var roomsCursor = Rooms.findOne({ roomName: rName });
if (roomsCursor != null) {
// It's a dup; don't allow it
event.target.roomName.value = "Duplicate room name, try again";
return(null);
}
var uName = Session.get ('userName');
// It's a unique name, put it in the Rooms collection.
Rooms.insert({
roomName : rName,
owner : uName,
members: [], // an array of user names
knockRequests: [], // an array of user names
chat : null,
files : null
});
// We have the room document added to the Rooms collection, now we have to
// add the room to the owned list for the user
var userEntry = PZUsers.find({ userName : uName }).fetch();
PZUsers.update({ _id : userEntry[0]._id},
{ $push: { ownedRooms: rName }});
ownedRoomCount++;
roomReactor.changed();
event.target.roomName.value = "";
}
});
Template.knock.events({
// Knock on a room request processing
"submit.knock-room": function (event) {
// Prevent default browser form submit
event.preventDefault();
var knockName = event.target.knockName.value;
event.target.knockName.value = "";
console.log("in knock room submit!");
// Can only knock on a room that exists!
var knockRoomCursor = Rooms.findOne({ roomName: knockName });
if (knockRoomCursor == null) {
console.log ("no such room found to knock on");
return;
}
// Add a knock request to this room, and add this room the the user's list of "open knocks" rooms
var roomEntry = Rooms.find({ roomName : knockName }).fetch();
console.log ("_id of room: " + knockName + " is: " + roomEntry[0]._id);
Rooms.update({ _id : roomEntry[0]._id },
{ $push: { knockRequests: Session.get('userName') }});
roomReactor.changed();
}
});
And here's the invoking html:
<template name="entryHall">
<h2>Welcome {{userName}}</h2>
<h3>Create a new room:</h3>
<div class="roomName">
<form class="new-room">
<input type="text" name="roomName" id="roomName" placeholder="Select a room name" />
</form>
</div>
{{markNoOwnedRooms}}
{{#each ownedRooms}}
{{#if firstOwnedRoom}}
<h3>Enter one of your own rooms:</h3>
{{/if}}
{{ > room }}
{{/each}}
{{markNoMemberRooms}}
{{#each memberRooms}}
{{#if firstMemberRoom}}
<h3>Enter one of your member rooms:</h3>
{{/if}}
{{ > room }}
{{/each}}
<h3>Knock to request entry:</h3>
{{ > knock }}
</template>
<template name="room">
<li>{{this}}</li>
</template>
<template name="knock">
<div class="knockName">
<form class="knock-room">
<input type="text" name="knockName" id="knockName" placeholder="Enter room name" />
</form>
</div>
</template>
Friends,
I'm working on my first app in Meteor and hitting my head against the wall on something...
I have a scenario similar to a blog + comments situation where I have one collection (call it 'posts') and want to associate documents from another collection (call it 'comments').
The best way I know to pass the post._id to the comments as a "postId" field is to use the Flow Router params, since the form is on the 'post/:id' view.
But for the life of me, I cannot figure out how to get "var postId = FlowRouter.getParam('postId');" to pass to Autoform so it populates. I've tried adding it as a function in the schema, as a hook, and as a hidden field in the form on the page (obviously don't want to go that route).
Autoform is amazing and I want to use it, but may have to wire it up the hard way if I can't get this darn value to populate.
Any ideas? I've been hitting my head against the wall on this for a couple of days now.
Thanks!
First, just so we're on the same page, if you have your route is set up like this:
FlowRouter.route('/blog/:postId', {
action: function (params, queryParams) {
FlowLayout.render('layout', { body: 'postTemplate' });
},
});
You are able to call FlowRouter.getParam('postId') from inside the AutoForm hook
You'll need to use an AutoForm hook and have a complete schema. I'm using the package aldeed:collection2 for the schema set up. The postId field must be explicity declared. This code is running on both server and client.
Comments = new Mongo.Collection("comments");
Comments.attachSchema(new SimpleSchema({
comment: {
type: String,
label: "Comment"
},
postId: {
type: String
}
}));
Setting your form up like this is not what you want:
{{> quickForm collection="Comments" id="commentForm" type="insert"}}
That's no good because it will show the postId field in the HTML output. We don't want that, so you have to fully define the form like this:
{{#autoForm collection="Comments" id="commentForm" type="insert"}}
<fieldset>
{{> afQuickField name='comment' rows=6}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
Then add the AutoForm hook. This code is running on the client.
var commentHooks = {
before: {
insert: function(doc){
var postId = FlowRouter.getParam('postId');
doc.postId = postId;
return doc;
}
}
};
AutoForm.addHooks(['commentForm'],commentHooks);
Make sure you have your allow/deny rules set up, and it should be working fine.
I was struggling with this same use case as well, and I found this on the Meteor forums: https://forums.meteor.com/t/use-flow-router-param-in-autoform/14433/2
If you're using a schema to build your form (either with the autoform or quickform tags) then you can put it right in there.
For example:
campaignId: {
type: String,
autoform: {
value: function() {
return FlowRouter.getParam('campaignId');
},
type: "hidden"
}
},