Basically what I want to do is, just update user details.so when
I input user ID all the other details of user are displayed in
textbox. Then I can edit anything.
Below is my js code:
Template.body.onCreated(function() {
this.currentTextBox = new ReactiveVar();
});
Template.body.events({
"keyup .new-task1"(event, instance) {
instance.currentTextBox.set(event.target.value);
}
});
Template.body.helpers({
dbs() {
const instance = Template.instance();
return Dbs.find({'user_id':instance.currentTextBox.get()});
}
});
Template.temp.events({
"submit .sub"(event) {
const target= event.target;
const name1 =target.name.value;
const add1 =add.value;
const r1 = target.r.value;
const const1 = target.const.value;
console.log(doc_id1);
Dbs.update({"user_id" : "pid"},{"name" : "name1","r" : "r1","const"
: "const"});
}
});
Now the problem is I am not able to update the edited field, though the value of edited field is sent to js file from html.anyone help me to solve this issue as I am new to meteor and mongo db.
Html code:
<head>
<title>eg1</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<nav class="#e57373 red lighten-2">
<div class="container">
<div class="nav-wrapper">
hello
<ul id="nav-mobile" class="right hide-on-med-and-down">
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col s2">
<form class="new-task">
<input type="text" name="pid" placeholder="patient_id" class="new-
task1"/>
</form>
</div>
<div class="col s4">
<ul class="collection">
{{#each dbs}}
{{>temp}}
{{/each}}
</ul><br><br>
</div>
</div>
</body>
<template name="temp">
<li class="collection-item">
<form class="sub">
<input type="text" name="user_id" value=" {{user_id}}"/>
<input type="text" name="addd" value=" {{add}}"/>
<input type="text" name="r" value=" {{r}}"/>
<input type="text" name="const" value=" {{const}}"/>
<center><input type="submit" value="Submit" class="waves-effect
#607d8b grey btn"></center>
</form>
</li>
</template>
Welcome to Meteor :)
You have to use $set attribute when you are updating document,
use as below and let me know.
Dbs.update({"user_id" : "pid"},{$set:{"name" : "name1","r" : "r1","const" : "const"}});
For more info on Collection.update Click Here.
Also go through Mongo Update Query example to know how to update a document when you directly use mongo shell.
Remember there are few differences when you directly use Mongo Shell commands and Meteor Collections.
Related
I need to make reactive a class inside a const (exported from a module).
export const messageControls = '
<div id="controls"">
<i id="idcont" class="{{starred}}"></i>
</div>
'
This class belongs to an HTML block who's inserted as innerHTML of a createElement.
var newElement = document.createElement('div');
newElement.id = i._id;
newElement.className = "single_message";
newElement.innerHTML = messageControls;
document.getElementById('conversation_details').appendChild(newElement);
The {{helper}} below is not rendering anything :
starred: function () {
return 'bob';
},
<i id="idcont" class="{{starred}}"></i> gives {{starred}} in plain text
<i id="idcont" class=" ' + {{starred}} + ' "></i> breaks all
Any idea?
Update - full Blaze template as requested
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
<div class="item-content">
<div class="task_inlist">
<div class="task_from">
{{{from}}}
</div>
<div class="task_date">
{{initialdate}}
</div>
<div class="task_subject">
{{{subject}}}
</div>
<div class="task_content">
{{{htmlbody}}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
</div>
<div id="conversation_details" class="col-xs-8" media="print">
<!--
here are each selected message details
-->
</div>
</div>
</template>
You're trying to inject spacebars template markup directly into the DOM but meteor-blaze wants to use spacebars to build the DOM. It doesn't watch the DOM for arbitrary changes and then make template substitutions inside of it!
You can instead use Meteor's reactivity to automatically insert new items into the DOM for you based on changes to the underlying data. In your case it looks like you're trying to show the details of a message that's been clicked on. You probably have a template event handler already to catch the click. In that template handler you can set a Session variable which indicates which message is currently selected and then use that Session variable inside the helper that renders the message details.
For example:
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
// render summary of each message
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
{{#with selectedMessage}}
<div id="conversation_details" class="col-xs-8" media="print">
// render selected message details
</div>
{{/with}}
</div>
</template>
Your js:
Template.inbox.events({
'click .item'(ev) {
Session.set('selectedMessageId',this._id);
}
});
Template.inbox.helpers({
selectedMessage() {
return Messages.findOne(Session.get('selectedMessageId'));
}
});
Now to your follow-up question about how to reactively style an element. Let's say your message* object has aisStarredboolean key. In the message detail section we've set the data context using{{#with currentMessage}}` so any key of the current message can be used directly in our spacebars template. Where you are displaying the message details you can do:
<div id="controls"">
<i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i>
</div>
Depending on whether or not the message is starred this will render as class="" or class="starred".
I make a simple page where data is inserted into database by a form using Refs of react.Can any body help me out how i can insert the data using aldeed:Simple schema or any curd example using that package.
please check my simple code for insertion.
import React,{Component} from 'react';
import {DoctorsList} from '../../../api/lists/DoctorsList.js';
export class DoctorCreate extends Component
{
addDoctor(event){
event.preventDefault();
var text= this.refs.DoctorName.value.trim();
console.log(text);
DoctorsList.insert({
name:text,
createdAt: new Date(),
owner: Meteor.userId(), // _id of logged in user
username: Meteor.user().username, // username of logged in user
});
this.refs.DoctorName.value="";
}
render()
{
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
<form className="form" onSubmit={this.addDoctor.bind(this)}>
<div className="form-group">
<label> Name</label>
<input ref="DoctorName" type="text" className="form-control" placeholder="name..."/>
</div>
<div className="form-group">
<input type="submit" value="save" className="btn btn-primary"/>
</div>
</form>
</div>
<br/>
<a href="/doctors" >Back to list </a>
<hr/>
</div>
</div>
)
}
}
Thanks in advance.
Meteor official TODOs app is using simple schema. Link to github source https://github.com/meteor/todos/blob/1.3-module-exports/imports/api/lists/methods.js
The code below is trying to grab the username and password from input elements on a template.login and createUser when a button which is in template.footer is clicked.
Being new to javascript and Meteor, my code below probably butchered both.
I thought to make a method call from the footer click event, this call gets the username and password and fires Meteor accounts create and store the returned userId in a local session to be used later. blah..blah..
But how can I get access to input values in one template from another?
so I need your help. Thanks
Template.footer.events({
'click .myClass': function (event, template) {
Meteor.call('loginUser', username,password);
}
});
Meteor.methods({
//store the useId returned from createUser in a local session userId
loginUser: function (username, password) {
Accounts.createUser(username, password, function () {
Session.set(userId, this.value);
});
}
});
<template name="footer">
<footer>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="row">
{{#each footerButtons}}
<h2>
<button class="col-xs-{{footerButtonsScaling}} myClass" type="button">{{text.toUpperCase}}</button>
</h2>
{{/each}}
</div>
</div>
</nav>
</footer>
</template>
<template name="login">
<form action="">
<input type="text" name="username" placeholder="type your ID" value="{{username}}">
<input type="password" name="password" placeholder="type your PIN" value="{{password}}">
</form>
</template>
You can just use jQuery to access field values anywhere in the DOM:
var username = $('[name="username"]').val();
var password = $('[name="password"]').val();
I'm stumped as to why part of my code isn't displaying when the session variable is set to true. When the user selects a certain option from the dropdown, based on the value, it changes the warmerselected to TRUE. I have tracked this in the console, and it works just fine.
Here is my code:
HTML:
<div class="item">
<div class="ui label">Product Type:</div>
<select id="ProductType" name="ProductType">
{{#each ProductTypes}}
<option value="{{ProductTypeAbbrev}}">{{ProductTypeName}}</option>
{{/each}}
</select>
</div>
{{#if warmerselected}}
<div class="item">
<div class="ui label">Name:</div>
<input type="text" name="ProductName" placeholder="Enter Product Name">
</div>
{{/if}}
JS:
Session.setDefault("warmerselected", false);
Template.addProduct.events({
'change #ProductType': function (e) {
var selitem = $("#ProductType").val();
if(selitem == "WA") {
Session.set("warmerselected",true)
}else {
Session.set("warmerselected",false);
}
}
});
Template.addProduct.helpers({
warmerselected: function(){
return Session.get("warmerselected");
}
});
Session isn't meant to be helper in HTML, you have to create one
I am working on a chat app that supports multiple languages. The basics of the app is working fine however I have small problem when changing chat rooms.
Each room is setup to support 2 languages. When sending a chat message you can choose which language you are sending the message in. This is done by clicking on a small icon of a flag which toggles between the 2 flag icons. The template for this is:
<template name="chatBar">
<div id="chatBar" class="input-append input-prepend">
<form id="chatForm">
<span class="add-on"><img src="/images/flags-iso/flat/16/{{chatMessageLang}}.png" id="lang"></span>
<input id="chatMessageLanguage" type="hidden" value="{{chatMessageLang}}">
<input id="chatMessageTarget" type="hidden" value="{{chatMessageTargetLang}}">
<input class="input-xxlarge" id="chatMessage" type="text" placeholder="← choose your language and then type your message here…">
<button class="btn" id="sendNewMessage" type="submit">Send</button>
</form>
</div>
and is called from another template:
<template name="chat">
{{> chatroom}}
<div id="chatWindow">
<ul>
{{#each chats}}
<li class="{{messageClass}} {{_id}}">
<img src="/images/flags-iso/flat/16/{{langOriginal}}.png">
{{langTo.flagicon}}
{{user}}:
<span class="message" lang="{{langOriginal}}">{{original}}</span>
{{#if translated}}
<span class="message" lang="{{langTranslated}}">{{translated}}</span>
{{/if}}
{{#if correction}}
<i class="icon-remove"></i>
<span class="friendCorrection">{{correction}}</span>
{{/if}}
<span class="messageOptions">{{{messageOptions}}}</span>
</li>
{{/each}}
</ul>
</div>
{{> chatBar}}
</template>
The problem I have is when I change chatrooms the language options are being retained from the previous chatroom I was in. The code for setting the languages for the chatbar is:
Template.chatBar.helpers({
chatMessageLang: function() {
//return getCurrentChatroomInfo().langFrom.iso;
return Meteor.user().profile.langNative;
},
chatMessageTargetLang: function() {
var chatroomLang1 = getCurrentChatroomInfo().langFrom.iso;
var chatroomLang2 = getCurrentChatroomInfo().langTo.iso;
if(Meteor.user().profile.langNative == chatroomLang1){
return chatroomLang2;
} else {
return chatroomLang1;
}
}});
function getCurrentChatroomInfo(){
return Chatrooms.findOne({_id : Router.current().params['_id']})
}
How do I make the variable chatMessageTargetLang reactive to the loaded chatroom (each chatroom has their own route).
Thanks
Adam