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.
Related
I'm working an application that uses Clarity's tab. Here's the code in my app.component file.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<ng-template [(clrIfActive)]="generalActive">
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</ng-template>
</clr-tab>
.....
Within the first tab I've embedded another component named header-comp that is defined as
<clr-input-container>
<label class="required">Table Name</label>
<input clrInput type="text" [(ngModel)]="tbl_nm" size="50" [ngModelOptions]="{standalone: true}"/>
<clr-control-error>You must provide a table name</clr-control-error>
</clr-input-container>
The problem I'm having is when I enter a timestamp value, stored in the configDetails model on app.component, and a table name, stored in the tbl_nm model of header.component, and then switch to the second and then back to the first tab, the table name is lost. The timestamp value is still present.
Why is the entered table name value lost when switching tabs? I don't think this is an issue of parent-child communication because app.component can read the entered table name value entered when the Submit button is selected and provided I haven't switched tabs first.
When you use the ng-template and structural directive clrIfActive, it actually removes the rendered template from the DOM when you switch tabs. This is for performance and is desirable in many cases. If you don't want the tabs to be reset, remove the template and clrIfActive directive.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</clr-tab>
</clr-tabs>
I have 3 radio buttons in a form which have to checked by robotframework. Below is part of the html code:
<div>
<div>
<label for="doc-22-Confirm">
Confirm
<input id="doc-22-Confirm" class="radiocheckbox" type="radio" checked="checked" value="Confirm" name="data[doc-22]"/>
</label>
<label for="doc-22-Reject">
Reject
<input id="doc-22-Reject" class="radiocheckbox" type="radio" value="Reject" name="data[doc-22]"/>
</label>
</div>
<div>
<label for="doc-23-Confirm">
Confirm
<input id="doc-23-Confirm" class="radiocheckbox" type="radio" checked="checked" value="Confirm" name="data[doc-22]"/>
</label>
<label for="doc-23-Reject">
Reject
<input id="doc-23-Reject" class="radiocheckbox" type="radio" value="Reject" name="data[doc-22]"/>
</label>
</div>
</div>
Ids are dynamic. So I'm trying to check all radios with this code but it just select one of them:
click element xpath=//input[contains(#id,'Confirm')]
I even tried this:
click element xpath=//input[contains(#id,'Confirm')][1]
click element xpath=//input[contains(#id,'Confirm')][2]
click element xpath=//input[contains(#id,'Confirm')][3]
But still it doesn't work.
Try the following:
Click element xpath=(//input[contains(#id,'Confirm')])[1]
I added the '( )' , it should solve the issue.
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
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.
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