I have a problem similar to this one. But in my case a have dynamic amount of objects (posts) to bind so if I do it this way:
{{#each Posts}}
...
{{#each Comments}}
{{/each}}
<form> /* new comment is added here */
<textarea name="text" value="{{newCommentText}}" />
<input type="submit" disabled="{{!newCommentText}}" />
</form>
{{/each}}
the values of all textareas are synchronized. What I need is to somehow specify a unique variable name for each form (i. e. {{PostId_newCommentText}}). Is there a way to achieve that?
You can use restricted references to add each new comment to the corresponding Post:
{{#each Posts}}
<form>
<!-- .newCommentText === this.newCommentText -->
<textarea name="text" value="{{.newCommentText}}" />
<input type="submit" disabled="{{!.newCommentText}}" />
</form>
{{/each}}
Another option is to use #index and store all new comments in separate array:
{{#each Posts}}
<form>
<textarea name="text" value="{{NewComments[#index]}}" />
<input type="submit" disabled="{{!NewComments[#index]}}" />
</form>
{{/each}}
Live demo here.
Related
I have the following code`
{{# each item}}
<p class="center">
<input type="checkbox" checked="checked" id="basiccbox" name={{id}} />
<label for="basiccbox"> </label>
</p>
{{/each}}
Multiple check boxes is now rendered. However, when i click any of the box, only the first check box toggles between the true or false states. This happens because of the
for="basiccbox"
and
id="basiccbox"
i.e all box that is rendered have the same Id. How do i generate unique ids or how does one deal with such a situation.
`
usually you should assign the item._id to id of checkbox tag. below is the code to solve your issue.
{{# each item}}
<p class="center">
<input type="checkbox" checked="checked" id={{_id}} name={{id}} />
<label for="basiccbox"> </label>
</p>
{{/each}}
It is good to bind the document id somewhere for tag element, because you can use the same id to do DB operations as well.
I am trying to pass a variable into a Meteor.js template and then use the variable in an if statement (in said template). One solution I could do is to simply use three separate templates rather than divide one template up using if statements, but I'm wondering if there is a better way to execute this. I know you can't use {{}} inside other {{}}'s, and handlebar if statements also don't seem to handle equality comparisons.
Here's my code (idType is the variable I'm passing through):
<template name="license">
{{> idForm idType="license"}}
</template>
<template name="idForm">
<form class="idForm">
{{#if idType=="license"}}
<span>Driver's License Details</span>
<input type="text" id="su-licenseNo" placeholder="License Number" />
<input type="text" id="su-surname" placeholder="Surname" />
<input type="text" id="su-givenNames" placeholder="Given Names" />
<input type="text" id="su-dateOfIssue" placeholder="Date Of Issue" />
<input type="text" id="su-dateOfExpiry" placeholder="Date Of Expiry" />
<input type="text" id="su-height" placeholder="Height" />
{{/if}}
{{#if idType=="passport"}}
<span>Passport Details</span>
<input type="text" id="su-type" placeholder="Type" />
<input type="text" id="su-issuingCountry" placeholder="Issuing Country" />
<input type="text" id="su-passportNo" placeholder="Passport Number" />
<input type="text" id="su-surname" placeholder="Surname" />
<input type="text" id="su-givenNames" placeholder="Given Names" />
<input type="text" id="su-nationality" placeholder="Nationality" />
<input type="text" id="su-dateOfIssue" placeholder="Date Of Issue" />
<input type="text" id="su-dateOfExpiry" placeholder="Date Of Expiry" />
{{/if}}
{{#if idType=="sin"}}
<span>SIN Details</span>
<input type="text" id="su-surname" placeholder="Surname" />
<input type="text" id="su-givenNames" placeholder="Given Names" />
<input type="text" id="su-number" placeholder="SIN" />
{{/if}}
<button>Submit!</button>
</form>
</template>
You can't do the comparison in the {{#if ...}} handlebar statements, {{#if idType=="license"}} isn't valid handlebars syntax.
You can get around this by making a comparison helper or you can alter your usage slightly and do:
<template name="license">
{{> idForm isLicense=1}}
</template>
<template name="idForm">
<form class="idForm">
{{#if isLicense}}
...
{{/if}}
{{#if isPassport}} <!-- this will be false since it was omitted -->
...
{{/if}}
</form>
</template>
I am just getting started messing around with Meteor and can't get the following code for a simple Collection.insert to update the database when the event is triggered. I can even see the page update with the value of the text field for a split-second before disappearing (presumably once Meteor realized the value wasn't written to the server). Inserting via the console works just fine... Is there some basic concept that I am overlooking?
file.js
var Tasks = new Meteor.Collection("Tasks");
if (Meteor.isClient) {
Template.main.task = function() {
return Tasks.find({});
};
Template.main.events = {
'click #submit' : function(event) {
var task = document.getElementById("text").value;
Tasks.insert({title: task});
}
};
}
file.html
<body>
{{> main}}
</body>
<template name="main">
<form class="form-inline">
<input type="text" id="text" class="input-small" />
<input type="Submit" class="btn" id="submit" value="Submit"/>
</form>
{{#each task}}
<span id="output">{{title}}</span>
{{/each}}
</template>
Your submit button issues a page reload before your javascript is executed canceling your request to the server.
Try using 'mousedown' instead of 'click' or (much better) prevent the button from doing a page reload.
Try using this snippet, it disables the submit for the button so only your javascript is executed.
<body>
{{> main}}
</body>
<template name="main">
<form class="form-inline">
<input type="text" id="text" class="input-small" />
<button type="button" class="btn" id="submit">Submit</button>
</form>
{{#each task}}
<span id="output">{{title}}</span>
{{/each}}
</template>
I changed your second <input>-tag to button and set it's type attribute to 'button' to make the button do nothing.
I have a webpage that has 3 file inputs. There are specific fields on the form that needs to be sent when user uploads the file. I am not able to figure out how do i add custom data to my POST and how do i retrieve it back on the server. This is how my code looks like:
ASPX Page with 3 file inputs and other text boxes/dropdowns:
<form action="FilesUploader.ashx" method="post">
<div id="dvNewAttachment1">
<span>Attachment Type</span>
<select id="ddlAttachmentType1">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
<span>Description</span>
<input id="txtDesc1" />
<select id="ddlApproval1">
<option>Yes</option>
<option>No</option>
</select>
<input id="fileUploader1" type="file" runat="server" />
</div>
<br />
---------------
<div id="dvNewAttachment2">
<span>Attachment Type</span>
<select id="ddlAttachmentType2">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
<span>Description</span>
<input id="txtDesc2" />
<select id="ddlApproval2">
<option>Yes</option>
<option>No</option>
</select>
<input id="fileUploader2" type="file" runat="server" />
</div>
<br />
-------------------------------
<div id="dvNewAttachment3">
<span>Attachment Type</span>
<select id="ddlAttachmentType3">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
<span>Description</span>
<input id="txtDesc3" />
<select id="ddlApproval3">
<option>Yes</option>
<option>No</option>
</select>
<input id="fileUploader3" type="file" runat="server" />
</div>
<input type="submit" />
</form>
This is how my handler looks like:
public void ProcessRequest(HttpContext context)
{
HttpPostedFile myFile = context.Request.Files[0];
int nFileLen = myFile.ContentLength;
byte[] buffer = new byte[nFileLen];
using (BinaryReader br = new BinaryReader(myFile.InputStream))
{
br.Read(buffer, 0, buffer.Length);
}
}
As you can see i have 3 uploads and each has Attachment Type and description associated with it which i need to retrieve for each input file in my handler.
Right now i am just processing file from the first input but later i am going to loop thru the inputs and process them.
If your handler do not receive files that you place in file uploaders then your form needs to have additional attribute like this:
<form action="FilesUploader.ashx" method="post" enctype="multipart/form-data">
In order to get values from dropdowns on server you need to provide a name attribute to them:
<select id="ddlApproval1" name="ddlApproval1">
<option>Yes</option>
<option>No</option>
</select>
I'm using cmfformcontroller in an app to manage a list of entries.
Entries are displayed using :records as documented at http://pypi.python.org/pypi/zope.httpform
<form action=".">
<p>Please, enter information about one or more of your next of
kin.</p>
<p>
First Name <input type="text" name="people.fname:records" />
Last Name <input type="text" name="people.lname:records" />
</p>
<p>
First Name <input type="text" name="people.fname:records" />
Last Name <input type="text" name="people.lname:records" />
</p>
<p>
First Name <input type="text" name="people.fname:records" />
Last Name <input type="text" name="people.lname:records" />
</p>
<input type="submit" />
</form>
I want my validator to be able to highlight a record using state.setError method. How could I achieve this ?
I have fix this use case by keeping a list of error key pattern: on starting by a pattern: id_field