I have a form with a text field and a list of radiobuttons. It is displayed using a window popup. I can pass simple parameters to the template, but I don't know how could I pass a list of values. I need to generate dynamically the list of radiobuttons. I tested using the List View, but it repeats the textfields and labels on my form by each item in the list. Any suggestion?
<div id="products">
<div id="details" />
</div>
<script id="tmplSell" type="text/x-kendo-template">
<div align="left">
<p>Please, fill the fields </p>
<b>Product:</b> <br />
<input type="text" name="txtProduct" id="txtProduct" class ="k-textbox" /> <br />
<b>Specify Color:</b>
<!-- dynamic radio button list -->
<button type="button" id="Button1" class="k-button" onclick="send(); return false; ">Send</button>
</div>
</script>
<script>
var template = kendo.template($("#tmplSell").html());
var window = $("#products").data("kendoWindow");
record = {id:0}; //passing a simple value, I need to pass a list of objects like ({color:"red",available:"5"} {color:"blue", available:"1"}
var entryHtml = template(record);
$("#details").html(entryHtml);
window.open().center();
</script>
The following code is from kendo templates documentation (Overview of templates), Remember that inside the template you can use javascript expressions
<div id="example"></div>
<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.length; i++) { #
<li>#= data[i] #</li>
# } #
</ul>
</script>
<script type="text/javascript">
//Get the external template definition using a jQuery selector
var template = kendo.template($("#javascriptTemplate").html());
//Create some dummy data
var data = ["Todd", "Steve", "Burke"];
var result = template(data); //Execute the template
$("#example").html(result); //Append the result
</script>
In your case, you can access any property using data[i].color or data[i].available
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 working on a project which needs to get parameters from url and insert it in mongodb.I i am using the below code,which is working but still some silly issues is causing a problem.
Below is the main.js code:
import { Template } from 'meteor/templating';
import { Dbs } from '../lib/collects.js';
import './main.html';
Router.route('/temp1/:ppid', function () {
this.render('temp1', {
data: function ()
{
var rpms = this.params.query.rpms;
return Dbs.findOne({patient_id:this.params.ppid});
}
});
});
Template.temp1.helpers({
'tempr': function() {
var p=Router.current().params.ppid;
var path1=Router.current().params.query.path;
var doc_id1 =Router.current().params.query.docid;
var temp1 = Router.current().params.query.temp;
var age1 = Router.current().params.query.age;
var gender1= Router.current().params.query.gender;
var height1= Router.current().params.query.height;
var weight1= Router.current().params.query.weight;
var tempr= Router.current().params.query.tempr;
Meteor.call('dbs.update',p,doc_id1,path1,temp1,age1,gender1,height1,weight1,tempr);
}
});
Below is main.html code:
<head>
<title>project1</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav class="#c5cae9 indigo lighten-4">
<div class="container">
<div class="nav-wrapper">
A3RMT
<ul id="nav-mobile" class="right hide-on-med-and-down">
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col s2">
</div>
</div>
</body>
<template name="a3">
<div class="row">
<div class="col s2">
<h4 class="black-text text-darken-4">INFORMATION</h4>
<table class="centered">
<form class="sub">
<tr>
<td><th>Doc_ID</th>{{doc_id}}</td>
<td><th>tempr</th>{{tempr}}</td>
<td><th>temp</th>{{temp}}</td>
</tr>
<tr>
<td><th>Path</th>{{path}}</td>
<td><th>age</th>{{age}}</td>
<td><th>gender</th>{{gendert}}</td>
<td><th>weight</th>{{weight}}</td>
<td><th>Height</th>{{height}}</td>
</tr>
</form></table></div></div>
</template>
The above code is working fine but the only issue is with line of code:"'tempr': function()".When i insert new parameters from url,its values are stored in database and even updated when i do update but it does not display value of "tempr" from database.And if i change 'tempr':function() to 'abc':function() i am not able to update nor insert anything into database. I am not understanding what am i suppose to use
Template.temp1.helpers({
'tempr': function() {
please anyone help me with this issue.How do i use template helpers
what do i need to specify at the place of "tempr" in
Template.temp1.helpers({'tempr': function()
The helper is used to work with data and supply it to the html dynamically. The template runs multiple times when the page loads. In your case, the dbs.update will be called many times over and over when the page loads. Ideally, any method call should be present in events. Eg. when you submit the form, update the db. If you want the update to happen each time the page loads, then have it put in the onRendered() method.
Probable solution:
Templates.<<template_name>>.events({
// on submit of a form or something similar
var p=Router.current().params.ppid;
var path1=Router.current().params.query.path;
var doc_id1 =Router.current().params.query.docid;
var temp1 = Router.current().params.query.temp;
var age1 = Router.current().params.query.age;
var gender1= Router.current().params.query.gender;
var height1= Router.current().params.query.height;
var weight1= Router.current().params.query.weight;
var tempr= Router.current().params.query.tempr;
Meteor.call('dbs.update',p,doc_id1,path1,temp1,age1,gender1,height1,weight1,tempr);
})
I am using parsley.js 2.0.2. for client side form validation.
Now I noticed on the Parsley Website that parsley 2.x has dynamic form validation.
I have a form on my page with parsley. It works correctly and does validate. Now on the same page I have a link that dynamically adds a form from an external file. Issue is now parsley.js won't validate the newly added form.
On the parsley website they have an example where one can use JavaScript to validate but I tried it and it does not work. Here is the snippet code of the example:
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I am aware that the content in the DOM changed but is there a way that I can tell parsley to validate this newly added form or something that will trigger the validation process?
I will appreciate the help!
Thanks
Here is my form on the index.php page (This form does successfully validate):
<form action="server.php" method="post" name="main-form" id="myForm" data-parsley-validate>
<div>
<label for="njsform-name">Name</label>
<input name="name" type="text" id="njsform-name" placeholder="Mike" data-parsley-required="true" data-parsley-minlength="2">
</div>
<div>
<label for="njsform-email">Surname</label>
<input name="email" type="text" id="njsform-email" placeholder="Gates" data-parsley-required="true" parsley-minlength="2">
</div>
<div class="submitWrap">
<input class="submit" type="submit" value="Apply Now" />
</div>
Here is the link that gets the external content
<ul class="services-list">
<li><a class="s-option" href="views/form-short_term_loans.php">My Link</a></li>
</ul>
Here is the code I am using to dynamically change the content (does successfully retrieve external form and populates):
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.services-list li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #form-section';
$('#form-section').load(toLoad)
}
});
$('.services-list li a').click(function(){
var toLoad = $(this).attr('href')+' #form-section';
$('#form-section').hide('fast',loadContent);
$('#load').remove();
$('#intro-section').append('<span id="load">Getting required form...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#form-section').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#form-section').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The second form is just a duplicate but the form id is myForm2 and the name second-form
Add a call to
$('#xxxxxx').parsley();
After the load of the new form. With xxxxx the id of the new form inserted in the DOM
I have two forms on a page containing Google captcha code, but only one code works. Does anyone know if you can use the same code with the same key on two forms on the same page?,
Thks,
Yes, you can. But you have to explicitly render the widget as mentioned on the developer guide
you should use something like this on your front end(taken from the developer guide):
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
I just wanted a HTML snipped which I can insert multiple times, each time displaying another captcha. Also, I did not want to take care for specific IDs assigned to the containers, which would be very annoying when multiple formulars still appearing on one page will be designed and rendered independently. Here is my solution.
<div class="g-recaptcha"></div>
<script type="text/javascript"><![CDATA[
function renderCaptchas() {
var captchaNodes = document.getElementsByClassName('g-recaptcha');
for (var i = 0; i < captchaNodes.length; i++) {
var captchaNode = captchaNodes[i];
if (!captchaNode.captchaRendered) {
captchaNode.captchaRendered = true;
grecaptcha.render(captchaNode, {"sitekey": "YOUR_SITE_KEY"});
}
}
}
]]></script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderCaptchas&render=explicit" async="async" defer="defer"></script>
while i create textbox dynamically i can able to add any no
of textbox while i delete only last textbox got deleted after it
an throws exception.
<html>
<head>My page </html>
<body>
<div id="firstdiv">
<input type="text" id="text" id="text1" value=""/>
<input type="button" id="butt" name="it's okay" value="+" onclick="text_add()"/>
<input type="button" id="butt1" name="it's okay" value="-" nclick="text_remove()"/>
</div>
</body>
<script type="text/javascript">
var i=0;
function text_add()
{
++i;
var bal=document.createElement("input")
bal.setAttribute("type","text");
bal.setAttribute("id","text"+i);
bal.setAttribute("name","bala");
firstdiv.appendChild(bal);
}
function text_remove()
{
try{
var a="\"";
a+="text"+(i);
a+="\"";
alert(a);
var bal=document.getElementById(a);
firstdiv.removeChild(bal);
--i;
}catch(e)
{
alert("Echo"+e);
}
}
</script>
</html>
chorme throws error: after deleting one text box like
EchoError: NOT_FOUND_ERR: DOM Exception 8
so you whant to add and remove textboxes.
and the latest textbox added shuld be removed?
so first you alreddy have a textbox in the dom witch will colide with your
naming
<input type="text" id="text" id="text1" value=""/>
is this an atemt to manualy add qoutes ? becus thats not part of the id
of the element
var a="\"";
a+="text"+(i);
a+="\"";
just give it the name normaly
var bal = document.getElementById("text" + i);
and you dont have to mess around with dom ids you can store
dom elements as normal objects so
something like this works fine
var textElements = [];
var firstdiv = document.getElementById("firstdiv");
function text_add() {
var bal = document.createElement("input");
bal.setAttribute("type","text");
bal.setAttribute("name","bala");
firstdiv.appendChild(bal);
textElements.push(bal);
}
function text_remove() {
firstdiv.removeChild(textElements.pop());
}
the pop method removes the last added item in the array