I have a reactive-table in Meteor that lists usernames and email addresses from the users collection. I want to click on the email address and have a modal pop up with that email address filled in the "to" field.
Template with reactive table and email modal:
<template name="Compete">
{{> reactiveTable class="table table-bordered table-hover" settings=settings }}
{{> emailModalTemplate settings.fields}}
</template>
settings helper:
Template.Compete.helpers({
settings: function(){
if (Meteor.user()){
var col = Meteor.users.find({ }, {fields: {profile:1, emails:1} } );
var email = 'emails.0.address';
return {
collection: col,
showFilter: false,
showNavigation: 'never',
fields: [{
key: 'profile.userName',
label: 'Player'
}, {
key: email,
label: 'Email',
fn: function(email){
return new Spacebars.SafeString(
''+email+''
);
}
}]
};
}
},
And here is the email modal template:
<template name="emailModalTemplate">
<div class="modal fade" id="emailModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Send Email</h4>
</div>
<div class="modal-body">
<form role="form" id="email-form">
<input type="email" id="inputEmail" placeholder="{{addToAddr}}">
<input type="text" id="inputSubject" placeholder="Subject">
<textarea id="inputBody" rows="5" placeholder="Message"></textarea>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
At this point, the {{addToAddr}} helper is just console logging "this" but all I can get back are the actual keys from the reactive table settings, but not the values. Am I passing in the right thing by passing in the reactive table helper?
What else could I pass in to the email modal template to get the actual email values that I can then use to populate the email to address field?
EDIT: One last note to add:
My click event is as follows:
'click .sndLnk': function(e){
e.preventDefault();
console.log( $(e.currentTarget).attr('value') );
$('#emailModal').modal('show');
}
The console.log here accurately shows the email address I want to pass in, but how do I pass that in to the email modal form? I assumed via the helper, but maybe that's wrong?
I tinkered with it some more and resolved it by setting a session variable in a new "external" helper function, "external" in that it is just a var I set, not within Template.myTemplate.helpers:
var openEmailModal = function(email) {
Session.set('theEmailAddr', email);
$('#emailModal').modal('show');
}
Then I modified the click event to call the new var/function:
'click .sndLnk': function(e){
e.preventDefault();
var email = $(e.currentTarget).attr('value');
openEmailModal(email);
}
At the end of the day this seems pretty basic, I made it into much more than it was I guess... Thanks to all who viewed.
Related
This are the event listeners for my two templates,specified in events.js
// event listeners on the addSiteForm template
Template.addCommentForm.events({
// this runs when they click the add button... you need to compete it
'click .js-add-comment':function(event){
var comment_text = $('#comment_input').val();// get the form value using jquery...
var user = 'anonymous person';
// the 'this' variable contains
// the data that this template is displaying
// which is the Website item
var site = this;
if (Meteor.user()){
user = Meteor.user().emails[0].address
}
var comment = {"text":comment_text,
"siteId":site._id,
"createdOn":new Date(),
"createdBy":user};// create a simple object to insert to the collectoin
Comments.insert(comment);
console.log("events start");
console.log("totla coomets are "+Comments.find({}).count()+"\n");
console.log("commenst in site "+Comments.find({siteId:site._id}).count()+"\n");
console.log("site id is "+site._id);
console.log("events end");
return false;
}
});
// event listeners on the addSiteForm template
Template.addSiteForm.events({
// this runs when they click the add button... you need to compete it
'click .js-add-site':function(event){
var url = $('#url_input').val();// get the form value using jquery...
var user = 'anonymous person';
if (Meteor.user()){
user = Meteor.user().emails[0].address
}
var site = {"url":url,
"createdOn":new Date(),
"createdBy":user};// create a simple object to insert to the collectoin
Websites.insert(site);
return false;
}
});
The router function is specified in router.js
Router.configure({
layoutTemplate: 'ApplicationLayout'
});
// the main route. showing the list of sites.
Router.route('/', function () {
this.render('siteList');
});
// this route is for the discussion page for a site
Router.route('/discussSite/:_id', function () {
var siteId = this.params._id;
site = Websites.findOne({_id:siteId});
this.render('discussSite', {data:site});
});
the main.js contain the collections
// shared code
Websites = new Mongo.Collection("websites");
Comments = new Mongo.Collection("comments");
helpers is
// this helper gets the data from the collection for the site-list Template
Template.siteList.helpers({
'all_websites':function(){
return Websites.find({});
},
'safer_email':function(email){
if (email.indexOf('#')!=-1){// we have an email
return email.split('#')[0];
}
else{// probably anonymouse.
return email;
}
}
});
Template.discussSite.helpers({
'comments':function(siteId){
//console.log("helper comments "+this.site);
// complete the code here so that it reruns
console.log(this.params.site._id);
return Comments.find({siteId:siteId});
// all the comments with a siteId equal to siteId.
}
});
the html file is in main.html.here it first displays the websites available in the webpage.On clicking this the user is routed to a new page.Here the user can add comments for the website
<head>
<title>week_4_peer_assessment</title>
</head>
<body>
</body>
<!-- this is the template that iron:router renders every time -->
<template name="ApplicationLayout">
<div class="container">
Home
{{>loginButtons}}
<h1>SiteAce - discuss your favourite websites</h1>
<!-- iron router will select what to render in place of yield-->
{{> yield }}
</div>
</template>
<template name="discussSite">
<h3>Discussing: {{url}} </h3>
{{> addCommentForm}}
<!-- write some code here that iterates through the comments and displays
the comment text and the author -->
<!-- clue - you have already written the 'comments' helper function -->
<ul>
{{#each comments}}
<li>{{text}} (added by {{safer_email createdBy}})
</li>
{{/each}}
</ul>
</template>
<template name="addCommentForm">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" id="comment_input" class="form-control" placeholder="Enter your comment">
<input type="hidden" id="site_id" class="form-control" placeholder="Enter your comment">
<span class="input-group-btn">
<button class="btn btn-default js-add-comment" type="submit">Add!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</template>
<template name="siteList">
Fill in the form and click submit to add a site:
{{>addSiteForm}}
<h3>Sites you have added:</h3>
<ul>
{{#each all_websites}}
<li>{{url}} (added by {{safer_email createdBy}})
<br/>discuss
<br/>visit site
</li>
{{/each}}
</ul>
</template>
<template name="addSiteForm">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" id="url_input" class="form-control" placeholder="Enter website URL...">
<span class="input-group-btn">
<button class="btn btn-default js-add-site" type="submit">Add!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</template>
The starup.js contains the start up code run by the server
Meteor.startup(function(){
if (!Websites.findOne()){// nothing in the database yet
var site = {"url":"http://www.google.com",
"createdOn":new Date(),
"createdBy":"Michael"};// create a simple object to insert to the collectoin
Websites.insert(site);
site = {"url":"http://www.yeeking.net",
"createdOn":new Date(),
"createdBy":"Janet"};// create a simple object to insert to the collectoin
Websites.insert(site);
site = {"url":"http://www.coursera.org",
"createdOn":new Date(),
"createdBy":"Jose"};// create a simple object to insert to the collectoin
Websites.insert(site);
}
});
This is what your template should be: (I removed safer_email. It was erroring. Not sure if it was something else you were working on.)
<template name="discussSite">
<h3>Discussing: {{url}} </h3>
{{> addCommentForm}}
<!-- write some code here that iterates through the comments and displays
the comment text and the author -->
<!-- clue - you have already written the 'comments' helper function -->
<ul>
{{#each comments}}
<li>{{text}} (added by {{createdBy}})</li>
{{/each}}
</ul>
</template>
helper:
your helper function is designed to take in siteId as an input, yet you are not passing one to it.
this._id or Router.current().params._id will get you the siteId that you are looking for. You'd used this.site._id which used to error out as this.site was not valid.You can further see what the this object contains by doing a console.log(this). That would have helped you sort this out faster.
'comments':function(){
console.log("site id in helper is ",this._id); // or Router.current().params._id;
console.log(Comments.find({siteId:this._id}).fetch());
return Comments.find({siteId:this._id});
}
I am new to Angular 2.
I have created a simple template which has two text field, I want to required field validate those two fields.
Login Form
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)" novalidate>
<div class="container">
<div class="form-group">
ooooo <label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required [(ngModel)]="UserData.uname" #uname="ngModel">
<div *ngIf="loginForm.invalid" class="alert alert-danger">
<div [hidden]="!uname.errors.required"> Name is required </div>
</div>
</div>
<div class="form-group">
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd" required [(ngModel)]="UserData.pwd" #pwd="ngModel">
<div *ngIf="UserData.pwd.errors && (UserData.pwd.dirty || UserData.pwd.touched)" class="alert alert-danger">
<div [hidden]="!UserData.pwd.errors.required">Password is required </div>
</div>
<button type="submit" >Login</button>
</div>
</div>
</form>
My Component
import { Component } from "#angular/core"
import { User } from "./UserModel"
#Component({
selector: 'my-login',
templateUrl:"app/Login/login.html"
})
export class LoginComponent
{
//alert: any("hello");
UserData: User = new User("", "");
submitted = false;
onSubmit(form: any) {
alert("dfsdfsd" + form);
if (!form.invalid) {
alert(this.UserData.uname);
alert(this.UserData.pwd);
this.submitted = true;
}
}
}
What i want to implement is-
When the form loads no validation message should appear?
When user clicks on the submit button then the required message should appear?
In both the textbox i have applied different type of checks to show the message that is inconsistent? so there should be a consistent way to solve this.
Many thanks for the help.
Maybe make use of the submitted variable, and use that in template, to not show message, until submitted is true, which we set it as in the submit function.
Also you wouldn't really need the two-way-binding here, since the object your form produces is directly assignable to your UserData.
The validation messages I'd just set then simply like this, where we are targeting the username:
<div *ngIf="uname.errors?.required && submitted"> Name is required </div>
in your submit function I'd pass loginForm.value as parameter instead of just loginForm. This way you get the form object ready to be used :)
And in your function you can assign the object to your UserData variable.
onSubmit(form: any) {
this.submitted = true;
this.UserData = form;
}
If you do want to keep the two-way-binding, it's of course totally possible! :)
DEMO
I have singlePost with postId. In each singlePost, I list comment.
Autoform for comment:
{{#autoForm id="updateCommentArray" type="update-pushArray" collection=Collections.Posts doc=commentDoc scope="comment" template="semanticUI"}}
{{> afQuickField name="content"}}
<div class="form-group">
<button type="submit" class="ui positive button">Submit</button>
<button type="reset" class="ui negative button">Reset</button>
</div>
{{/autoForm}}
What Autoform provide is to use scope to attach new array into specified field. For example, when I use scope comment.0.reply, that reply will attach to first array of comment. When I use scope comment.1.reply, that reply will attach to second array of comment. Etc
How to make it dynamic? What I thought is to use commentId, but how?
Thank you
I think it works like this:
The scope defines to which array inside a document the form is adding.
The doc is the document where the form shall add data to the scope.
For example (i did not test this, but it is similar to code i used):
javascript:
CommentsSchema = new SimpleSchema({
comment:{
type:String,
autoform:{
rows: 2
}
}
});
PostSchema = new SimpleSchema ({
content:{
type:String,
autoform: {
rows: 2
}
},
comments:{
type:[CommentsSchema]
}
});
template:
{{#each posts}}
{{#autoForm id=this._id type="update-pushArray" collection='Posts' doc=this scope="comment" template="semanticUI"}}
{{> afQuickField name="content"}}
<div class="form-group">
<button type="submit" class="ui positive button">Submit</button>
<button type="reset" class="ui negative button">Reset</button>
</div>
{{/autoForm}}
{{/each}}
I am using mizzao/meteor-autocomplete and am having problems in trying to get it to work.
When viewing the page in my browser, I am getting no results at all when typing any text. I've created the appropriate collection:
Institutions = new Mongo.Collection("institutions");
and know that there is data in the actual db, however still no success.
I've included my files below.
publications.js (located in the server folder)
Meteor.publish('institutions', function(args) {
return Institutions.find({}, args);
});
registrationStart.js
I've two helpers; one that actually powers the search and the other that should be returning the institutions. I have also tried this with the token: '#' argument with no success.
if (Meteor.isClient) {
Template.registrationStart.helpers({
settings: function() {
return {
position: "top",
limit: 7,
rules: [{
collection: Institutions,
field: "name",
options: '',
matchAll: true,
template: Template.institutionSelectDisplay
}]
};
},
institutions: function() {
return Instititions.find();
}
});
Template.registrationStart.events({
"autocompleteselect input": function(event, template, doc) {
// Session.set(event.target.name, event.target.value);
console.log("selected: ", doc);
console.log("event.target.name: ", event.target.name);
console.log("event.target.value: ", event.target.value);
}
});
}
registrationStart.html template
<template name="registrationStart">
<div class="panel-body" id="loginForm">
<h2 class="pageTitle">veClient Registration</h2>
<form>
<div> </div>
<fieldset>
{{> inputAutocomplete settings=settings id="institution" class="input-xlarge" placeholder="type institution here"}}
</fieldset>
<div> </div>
<button type="submit" class="btn btn-primary btn-sm">Continue Registration</button>
</form>
</div>
</template>
And the template to be rendered
<template name="institutionSelectDisplay">
<p class="inst-state">{{city}}, {{state}}</p>
<p class="inst-name">{{name}}</p>
<p class="inst-description">{{email}}</p>
</template>
Problem resulted because there was no subscription to the "institutions" publication. So need to add a subscribe statement to the registrationStart.js file:
Meteor.subscribe('institutions');
I am new to the Ionic Framework. I just started building a few functionalities in AngularJS. Here, what I want is to enter the email and booking ID of a user in an HTML page and then redirect it to other pages which displays all email ids and booking id... Here is my code:
Reservation.html:
<form ng-submit = "goBooking(data)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Enter Your Email Id" ng-model="data.emailId" required>
</label>
<label class="item item-input">
<input type="text" placeholder="Enter Your Booking Id" ng-model="data.bookingID" required>
</label>
</div>
<div class="padding">
<input type="submit" class="button button-block button-positive" value = "Submit" />
</div>
</form>
</ion-content>
</ion-view>
Reservation.JS
Controller.js:
.controller('reservationCtrl', function($scope, $state, $stateParams) {
$scope.toDoListItems = [{
emailId: 'versha',
bookingID: '123'
}, {
emailId: 'rahul',
bookingID: '456'
}];
$scope.getTotal = function(){
return $scope.toDoListItems.length;
}
$scope.goBooking = function(data){
$scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
$state.go('myBookingDetails');
data.emailId = ' ';
data.bookingID = ' ';
};
});
myBookingDeatils.html:
<ion-view view-title="Hotel Reception">
<ion-content>
<ion-list>
<ion-item ng-controller = "reservationCtrl" ng-repeat="item in toDoListItems">
<p> Welcome {{item.emailId}} !!!! </p>
ion-item>
</ion-list>
</ion-content>
</ion-pane>
</ion-view>
After running this,
I am getting output as
Welcome, Versha!!
Welcome, Rahul!!
I am not getting that email ID and Booking ID. What I am entering on my Reservation.html. I think my input values are not being set in the toDoListItems.
Somewhere, this code is not inserting the values $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
Please Suggest!! Thanks in Advance!!
I am assuming you are using the same controller for each state? When you change states you reload your controller, which resets your $scope.toDoListItems array to it's inital state. You are going to want to save your toDoListItems in a Service. So...
Controller:
.controller('reservationCtrl', function($scope, $state, $stateParams, toDo) {
$scope.getTotal = function(){
return toDo.toDoListItems.length;
}
$scope.goBooking = function(data){
toDo.toDoListItems.push({
emailId:data.emailId,
bookingID:data.bookingID
});
$state.go('myBookingDetails');
data.emailId = null;
data.bookingID = null;
};
});
Service:
.factory('toDo', [function () {
var toDoListItems = [{
emailId: 'versha',
bookingID: '123'
}, {
emailId: 'rahul',
bookingID: '456'
}];
return {
toDoListItems : toDoListItems
};
}]);
This will ensure that the data survives the state change, however if you want this data to persist permanently and stay on page reloads etc.. you will need to hook up a database, if you are purely a front end guy I suggest looking at Firebase
A very simple way to accomplish this would be to just use $localstorage.
Something like this:
$scope.goBooking = function(data){
$scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
$localstorage.setObject('toDoListItems', $scope.toDoListItems);
$state.go('myBookingDetails');
};
And then inside of your new view (where the controller and scope are getting refreshed as Jacob pointed out)
$scope.toDoListItems = $localstorage.getObject('toDoListItems');
You'll just need to add the $localstorage service to you services (detailed in link below). For more info on using localstorage with Ionic, visit: http://learn.ionicframework.com/formulas/localstorage/