I have created search code, but the values cannot display. Can anyone help me?
This my code:
<template name="search">
<form >
<input type="text" id="categories" />
<button>Search</button>
</form>
<hr/>
<h3></h3>
<ol>
{{#each profil}}
<li>{{brand}}</li>
{{/each}}
</ol>
Template.search.events({
"submit ": function (e) {
e.preventDefault();
Session.set("categories", $("#categories").val());
}
});
Template.search.helpers({
profil: function() {
return Profil.find({
categories: Session.get('categories'),
});
}
});
I'm not sure how to code in publish (server).
Try this :
Put this in search.html
<template name="search">
<form id="searchForm">
<input type="text" id="categories" />
<button>Search</button>
</form>
<hr/>
<ol>
{{#each profil}}
<li>{{brand}}</li>
{{/each}}
</ol>
</template>
This in search.js :
Template.search.events({
"submit #searchForm": function (e) {
e.preventDefault();
Session.set("categories", e.target.text.value);
}
});
Template.search.helpers({
profil: function() {
return Profil.find({
categories: Session.get('categories'),
});
}
});
And make sure that "autopublish" package is added. This would do the trick!
Related
This Meteor code uses patrickml:braintree, since I do not have access to the braintree submit event in order to send a price to the server for processing.
How can I pass an $$ amount from a html element on the page where the client is clicking to the server?
//client
Template.account.onRendered(function () { //6a
Meteor.call('getClientToken', function (error, clientToken) {
if (!error) {
braintree.setup(clientToken, "dropin", {
container: "payment-form",
onPaymentMethodReceived: function (response) {
var nonce = response.nonce;
Meteor.call('btCreateCustomer', function(error) {
if (error) {
throw new Meteor.Error('customer-creation-failed');
} else {
Meteor.call('createTransaction', nonce, function (error) {
if (error) {
throw new Meteor.Error('transaction-creation-failed');
}
});
}
});
}
});
}
});
});
<template name="account">
<div id="account">
<p>Select invoice period:</p>
<select class={{this.class}} data-id={{_id}} name={{name}}>
{{#each values}}
<option class={{class}} selected={{selected}} name={{name}} value={{value}}>{{{label}}}</option>
{{/each}}
</select>
<br><br>
<form role="form">
<div class="row">
<div class="col-md-6 col-xs-12">
<div id="payment-form"></div>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</template>
I have implemented the following code from insert autoform
Schemas = {};
Template.registerHelper("Schemas", Schemas);
Schemas.Person = new SimpleSchema({
firstName: {
type: String,
index: 1,
unique: true
},
lastName: {
type: String,
optional: true
},
age: {
type: Number,
optional: true
}
});
var Collections = {};
Template.registerHelper("Collections", Collections);
People = Collections.People = new Mongo.Collection("People");
People.attachSchema(Schemas.Person);
Meteor.publish(null, function () {
return People.find();
});
People.allow({
insert: function () {
return true;
},
remove: function () {
return true;
}
});
{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}
<div class="form-group {{#if afFieldIsInvalid name='firstName'}}has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='firstName'}}</label>
{{> afFieldInput name='firstName'}}
{{#if afFieldIsInvalid name='firstName'}}
<span class="help-block">{{{afFieldMessage name='firstName'}}}</span>
{{/if}}
</div>
<div class="form-group {{#if afFieldIsInvalid name='lastName'}}has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='lastName'}}</label>
{{> afFieldInput name='lastName'}}
{{#if afFieldIsInvalid name='lastName'}}
<span class="help-block">{{{afFieldMessage name='lastName'}}}</span>
{{/if}}
</div>
<div class="form-group {{#if afFieldIsInvalid name='age'}}has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='age'}}</label>
{{> afFieldInput name='age'}}
{{#if afFieldIsInvalid name='age'}}
<span class="help-block">{{{afFieldMessage name='age'}}}</span>
{{/if}}
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Add Person</button>
<button type="reset" class="btn btn-default">Reset Form</button>
</div>
{{/autoForm}}
Database entries are not being created, where am I going wrong.
Added this to 2_collections.js in common folder and it works fine.
People.allow({
insert: function () {
return true;
},
remove: function () {
return true;
}
I want to create a custom field validation for forms using Meteor. I don't want a packaged solution.
Here is my code so far.
JavaScript:
var errorState = new ReactiveVar;
Template.lottoForm.created = function() {
errorState.set('errors', {});
};
Template.lottoForm.events({
'blur input': function(e, t) {
e.preventDefault();
validate($(this));
}
});
Template.lottoForm.helpers({
errorClass: function (key) {
return errorState.get('errors')[key] ? 'has-error' : '';
}
});
Template.errorMsg.helpers({
errorMessages: function(key) {
return errorState.get('errors');
}
});
function throwError(message) {
errorState.set('errors', message)
return errorState.get('errors');
}
function validate(formField) {
$("input").each(function(index, element){
var fieldValue = $(element).val();
if(fieldValue){
if(isNaN(fieldValue) == true) {
throwError('Not a valid Number');
}
}
});
}
HTML:
<template name="lottoForm">
<form class="playslip form-inline" role="form">
<fieldset>
<div class="form-group {{errorClass 'ball0'}}">
<input type="text" class="input-block form-control" id="ball0" maxlength="2" name="ball0">
</div>
<div class="form-group {{errorClass 'ball1'}}">
<input type="text" class="input-block form-control" id="ball1" maxlength="2" name="ball1">
</div>
<div class="form-group {{errorClass 'ball2'}}">
<input type="text" class="input-block form-control" id="ball2" maxlength="2" name="ball2">
</div>
<div class="form-group {{errorClass 'ball3'}}">
<input type="text" class="input-block form-control" id="ball3" maxlength="2" name="ball3">
</div>
<div class="form-group {{errorClass 'ball4'}}">
<input type="text" class="input-block form-control" id="ball4" maxlength="2" name="ball4">
</div>
<div class="form-group {{errorClass 'ball5'}}">
<input type="text" class="input-block form-control" id="ball5" maxlength="2" name="ball5">
</div>
{{> errorMsg}}
<div class="play-btn">
<button type="submit" value="submit" class="btn btn-primary">Play Syndicate</button>
</div>
</fieldset>
</form>
</template
<template name="errorMsg">
<div class="errorMsg">
{{#if errorMessages}}
<div class="list-errors">
{{#each errorMessages}}
<div class="list-item">{{> fieldError}}</div>
{{/each}}
</div>
{{/if}}
</div>
</template>
<template name="fieldError">
<div class="alert alert-danger" role="alert">
{{errors}}
</div>
</template>
I'm also getting this error message in the console - "Uncaught Error: {{#each}} currently only accepts arrays, cursors or falsey values."
Why do I get this error and how would I implement the custom validation?
Just as the error says, #each template functions must be passed the proper type. Are you sure your errorMessages helper is returning an array? It looks like you are initializing it as a hash.
Here is my template:
<template name="list">
<div class="col-md-12">
{{#if jobsLoaded}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{{ jobUrl url title }}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
{{#if jobsLoaded}}
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
{{#if jobs}}
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
{{/if}}
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
{{/if}}
</div>
</template>
Client Side JS:
Deps.autorun(function(){
Meteor.subscribe('cities');
Meteor.subscribe('jobs', Session.get('currentIndustryOnet'), function(){
Session.set('jobsLoaded', true);
});
});
Template.list.jobsLoaded = function () {
return Session.equals('jobsLoaded', true);
};
Template.list.rendered = function(){
var select = $('#perPage');
var option = select.attr('_val');
$('option[value="' + option + '"]').attr("selected", "selected");
select.selectpicker({
style: 'btn-info col-md-4',
menuStyle: 'dropdown-inverse'
});
}
Template.list.jobs = function() {
Deps.autorun(function(){
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
});
}
Server Side JS:
Meteor.publish('jobs', function(onet_code){
var cursor, options = {sort: {dateacquired: -1}};
console.log(onet_code);
if(onet_code){
cursor = Jobs.find({onet: onet_code}, options);
} else {
cursor = Jobs.find({}, options);
}
return cursor;
});
Meteor.publish('cities', function(){
return Cities.find({}, {sort: {pop: -1}, limit: 100});
});
For some reason when you load the page, the pagination appears, but the {{#each jobs}} isn't populated with the collection results.
Update:
Template.list.jobs = function() {
var options = {}, jobs;
if(Session.get('currentMapArea')) {
var c = Cities.findOne({_id: Session.get('currentMapArea')});
options.address = c.city.capitalize() + ", " + c.state;
}
if(Session.get('currentIndustryOnet')) {
options.onet = Session.get('currentIndustryOnet');
}
if($.isEmptyObject(options)) {
jobs = Jobs.find();
} else {
jobs = Jobs.find(options);
}
Session.set('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
}
Update 3:
Pagination:
Template.list.pagination = function() {
return Pagination.links('/jobs', Session.get('jobCount') || 1, {currentPage: Session.get('page') || 1, perPage: Session.get('perPage') || 10});
}
<template name="list">
<div class="col-md-12">
{{#if jobsReady}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{{ jobUrl url title }}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
{{#if jobsReady}}
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
{{/if}}
</div>
</template>
I believe the problem is with this code -- it doesn't return anything:
Template.list.jobs = function() {
Deps.autorun(function(){
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
});
}
Think about what the return does. It return from the function in the Deps.autorun. The outer function returns nothing.
I think you can simply lose the Deps.autorun and do this, which should still be reactive:
Template.list.jobs = function() {
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count()); // should this be a 'Session.set'?
return Pagination.collection(jobs.fetch());
}
Also note the question in the comment.
I am try to when click on Form submit button it navigates to new page with same window dynamically but it is not loading the details but it navigates to that page.I am sending my code also please help me.
Html page
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
{{> header}}
{{> body}}
{{> footer}}
</div>
<div class="row-fluid">
{{render-Router}}
</div>
</body>
<template name="header">
<header>
<div class="header">
<img src="./logo.png" style="height:100px;width:200px;"/>
</div>
</header>
</template>
<template name="body">
<div class="bgbody">
<div align="center">
<form id="login-form" action="/admindetails">
<table>
<p class="admin">Admin Login</p>
<tr>
<td><p for="username">Admin Name</p></td>
<td><input type="text" id="username" name="username" placeholder="UserName"></td>
</tr>
<tr>
<td><p for="password">Password</p></td>
<td><input type="password" id="pwd" name="password" placeholder="password"></td>
</tr>
<td></td><td><input class="btn btn-success" type="submit" value="Log In"></td>
<td><input class="btn btn-capsule" type="button" value="New User"></td>
</table>
</form>
</div>
</div>
</template>
<template name="footer">
<div class="footer">
<div style="padding:20px;">
<div class="footerlinks"><p>AboutUs</p></div>
<div class="footerlinks">|</div>
<div class="footerlinks"><p>ContactUs</p></div>
<div class="copyright"><p>Copyright#Healt_Care</p></div>
</div>
</div>
</template>
Client code:
if (Meteor.isClient) {
Meteor.Router.add({
'/admindetails':'admindetails'
})
Template.body.events
({
'submit #login-form' : function (e,t)
{
/* template data, if any, is available in 'this'*/
if (typeof console !== 'undefined')
console.log("You pressed the button");
e.preventDefault();
/*retrieve the input field values*/
var email = t.find('#username').value
, password = t.find('#pwd').value;
console.log(email);
Meteor.loginWithPassword(email, password, function (err)
{
if (err)
{
console.log(err);
alert(err.reason);
Session.set("loginError", true);
}
else
{
console.log(" Login Success ");
Meteor.Router.to("/admindetails");
}
});
}
});
}
You manage the submit event yourself, so there's no need to set up the action parameter of the form. Setting that parameter causes browser to load target page on submit. Simply remove the parameter and things should work as intended.