Cannot check checkbox - Thymeleaf - html

I have a list of users in a table with a column at the end that has checkboxes so if a user clicks on any of the checkboxes, he can delete the user in that row.
However, after I added the th:field="*{checkedUsers}" tag, I am not able to click any of the check boxes.
Here is the HTML code for that:
http://pastebin.com/tT9QmVwB
Any ideas?
Thanks
EDIT:
I realize it could be something to do with the <label> tag:
The tag defines a label for an <input> element.
The <label> element does not render as anything special for the user.
However, it provides a usability improvement for mouse users, because
if the user clicks on the text within the <label> element, it toggles
the control.
The for attribute of the <label> tag should be equal to the id
attribute of the related element to bind them together.
http://www.w3schools.com/tags/tag_label.asp
Is this the problem? And if so, how could I work around it?
EDIT 2:
<label> had nothing to do with it. I replaced it with <span> and I still can't click on any of the check boxes.
EDIT 3:
The th:field="*{checkedUsers}" field is an ArrayList of User objects that are checked and would populate the form-backing bean DeleteUsersForm
Here is that bean class:
public class DeleteUsersForm {
private List<User> checkedUsers;
public DeleteUsersForm() {
}
public DeleteUsersForm(List<User> checkedUsers) {
this.checkedUsers = checkedUsers;
}
public void setCheckedUsers(List<User> checkedUsers) {
this.checkedUsers = checkedUsers;
}
public List<User> getCheckedUsers() {
return checkedUsers;
}
}

Just realized it was the CSS that was preventing it this whole time. I am using topcoat.

Related

Thymleaf how to take an input and then redirect to another page

I'm learning Spring boot. I have a list of products with unique ids, and I want to implement a "lookup by id" functionality, but I don't know how to do it, I searched but got totally different stuff.
I already have a #Getmapping method like this:
#Getmapping(/products/{id})
If I manually type in the id in the url I'll get what I what. But I want to have an input box in the HTML page like:
<form>
Look up by id: <input/>
</form>
and after I submit the form it'll redirect to that page. For example, if I enter input of 1, it'll go to localhost:8080/products/1
I've been searching but all I got was stuff about #Postmapping.
Add a #PostMapping to your controller:
#Controller
#RequestMapping("/products")
public class ProductController {
#GetMapping //Controller method for showing the empty form
public String index(Model model) {
model.addAttribute("formData", new SearchFormData()); // Create an empty form data object so Thymeleaf can bind to it
return "index";
}
#PostMapping
public String searchById(SearchFormData formData) {
return "redirect:/products/" + formData.getId(); //Use the value the user entered in the form to do the redirect
}
#GetMapping("/{id}")
public String showProduct(#PathVariable("id") long id) {
...
}
}
With SearchFormData representing the form fields (there is only 1 field in this case):
public class SearchFormData {
private long id;
// getters and setters
And update Thymeleaf template like this:
<form th:action="#{/products}" th:method="post" th:object="${formData}">
<input th:field="*{id}" type="number">
<button type="submit">Search</button>
</form>
Note that the value of th:object needs to match with the name used to add the SearchFormData instance to the model.
See Form handling with Thymeleaf for more info.
The following simple code will direct you to a URL that is generated from a concatenation of the base address of the <form>'s action attribute and the value of its first <input>:
document.querySelector("form").addEventListener("submit",function(ev){
ev.preventDefault();
this.action="/product/"+this.querySelector("input").value;
console.log(this.action);
// in real code: uncomment next line!
// this.submit()
})
<form>
Look up by id: <input type="text" value="123" />
</form>
In the real code you will delete the console.log() und uncomment the following line: this.submit().
Alternatively you could also do:
document.querySelector("form").addEventListener("submit",function(ev){
ev.preventDefault();
location = "/product/"+this.querySelector("input").value;
})
This will redirect you to the page without actually submitting the form.

Angular Checkbox - Cannot get the value of database to match the checkmarks in html checkbox

Looking for your kind assistance as I am still new to coding and angular.
I have this form which allows to me do CRUD data.
In adding the data, I have a several checkbox which I can manage to successfully stored in the database.
However, when I am trying to edit the data, the checkbox are no longer showing check markings based on the data in the table.
I have a Modal form and I am having a hard time matching the data in the checkbox to the ones in database.
Component.html
<div>
<div *ngFor="let item of _placarddetails">
<input type="checkbox" name="{{item.id}}" [(ngModel)]="item.isselected">
<label> {{item.name}}</label>
</div>
</div>
Component.TS
ngOnInit(): void {
this.loadPlacardQualityList();
}
loadPlacardQualityList(){
this.service.getAllEdcmTicketNo().subscribe((data:any)=>{
this.PlacardQualityList=data;
this.PlacardQualityId=this.pq.PlacardQualityId;
this.EdcmTicketNo=this.pq.EdcmTicketNo;
this.PQDeliveryDate=this.pq.PQDeliveryDate;
this.PlacardAppearance=this.pq.PlacardAppearance;
this.PlacardDetails=this.pq.PlacardDetails ;
this.PlacardAcceptance=this.pq.PlacardAcceptance;
this.Inserts=this.pq.Inserts;
this.CheckedBy=this.pq.CheckedBy;
this.PowerProduct=this.pq.PowerProduct;
this.Comment=this.pq.Comment;});
this.
}
addPlacardQuality()
{
var val = {
PlacardQualityId:this.PlacardQualityId,
EdcmTicketNo:this.EdcmTicketNo,
PQDeliveryDate:this.PQDeliveryDate,
PlacardAppearance:this.PlacardAppearance,
PlacardDetails:this.PlacardDetails = this._placarddetails.filter(x=>x.isselected==true).map(x=>x.name).join(","),
PlacardDetailsID:this.PlacardDetails = this._placarddetails.filter(x=>x.isselected==true).map(x=>x.name).join(","),
Inserts:this.Inserts,
CheckedBy:this.CheckedBy,
PowerProduct:this.PowerProduct,
Comment:this.Comment};
this.service.addPlacardQuality(val).subscribe(res=>{alert(res.toString());
});
}
updatePlacardQuality(){
var val = {
PlacardQualityId:this.PlacardQualityId,
EdcmTicketNo:this.EdcmTicketNo,
PQDeliveryDate:this.PQDeliveryDate,
PlacardAppearance:this.PlacardAppearance,
PlacardDetails:this.PlacardDetails = this._placarddetails.filter(x=>x.isselected==true).map(x=>x.name).join(","),
Inserts:this.Inserts,
CheckedBy:this.CheckedBy,
PowerProduct:this.PowerProduct,
Comment:this.Comment}
this.service.updatePlacardQuality(val).subscribe(res=>{alert(res.toString());});
}
getPlacardDetails()
{
this._placarddetails=[
{id:1,name:"Company Name",isselected:false},
{id:2,name:"Company Logo",isselected:false},
{id:3,name:"Certification Level",isselected:false},
{id:4,name:"Year",isselected:false},
{id:5,name:"Badge Name",isselected:false},
]
}
class PDetail{
id!: number;
name!: string;
isselected!: boolean;
}
Here is the sample screenshot whenever I open the edit button.
sample screenshot
I understand that the reason why it is not showing a checkmarks is because of the getPlacardDetails() which is showing false value.
Is there a way that you can recommend a method how I can fix this?
I'm running out of resources and logic lol.
Sorry, still in-experience and I still have lots to learn.
Thank you in advance!
Use "checked" attribute of the checkbox to make it checked. Code as below:
<input type="checkbox" name="{{item.id}}" [(ngModel)]="item.isselected" [checked]="item.isselected">
Also for more details you can refer to below link:
Angular 5, HTML, boolean on checkbox is checked

Angular 2 html form validation

I've created a form using html validations with Angular 2.
I want to to check the sate of the inputs (no empty, correct format, etc) when the user click to a certain button. At the moment I'm doing it as following:
<form id="memberForm" #memberForm="ngForm" >
<input
type="text"
id="MemberName"
required
name="MemberName"
[(ngModel)]="newMember.name">
</form>
<div
[ngClass]="{'button_disabledButton' : !memberForm?.valid}"
(click)="onSubmit(memberForm?.valid, memberForm);">
<span>Next</span>
</div>
With this, I'm only evaluating the input once clicked and focus out. How can I make it hapens when the user click in the "Next" element?
You should make getter/setter solution for your ngModel input.
In the .ts file in the appropriate class put this:
savedVar:string = '';
get variable(): string {
return this.savedVar;
}
set variable(str: string) {
this.savedVar = str;
// do your validation
}
In template use ngModel=variable like this:
<input [(ngModel)]="variable">

How can i click a span in Behat?

I am using Behat to test an third-party webshop. I have a item in the shoppingcart that i want to delete. A confirmation pop-up shows that asks me if i really want to do it. The structure of this dialog looks as following:
<div>
<strong class="title">Remove item from shoppingcart</strong>
<p>Are you sure you want to delete this product?</p>
<div class="button-container">
<span class="button" data-confirm="true">Yes</span>
<span class="button alt right" data-mfp-close-link="true">No</span>
</div>
</div>
I was able to select the span using xpath with the following code:
public function iConfirmTheWindow()
{
$session = $this->getSession();
$element = $session->getPage()->find(
'xpath',
$session->getSelectorsHandler()->selectorToXpath('css', 'span.button')
);
if (null === $element) {
throw new \InvalidArgumentException(sprintf('Could not find confirmation window'));
}
$element->click();
}
The selecting works, but Behat seems to be unable to click the span.
supports clicking on links and submit or reset buttons only. But "span" provided
I need to click this item, how can i rewrite my function so that it can be clicked?
The answer from #bentcoder doesn't make any different. It uses a different a selector to find the element, but the Minkcontext click functionality doesn't support clicking on span elements.
Which i find quite strange, because with jQuery you can add the button class to and span element and there is your button.
Context code:
/**
* #Given I click the :arg1 element
*/
public function iClickTheElement($selector)
{
$page = $this->getSession()->getPage();
$element = $page->find('css', $selector);
if (empty($element)) {
throw new Exception("No html element found for the selector ('$selector')");
}
$element->click();
}
CLI output:
And I click the "#new_account" element # tests/behat/features/account.feature:14
Behat\Mink\Driver\GoutteDriver supports clicking on links and submit or reset buttons only. But "span" provided (Behat\Mink\Exception\UnsupportedDriverActionException)
I'm assuming that you have have a Behat driver for interpreting javascript. So i've added #javascript to the feature:
like so:
#javascript
Scenario: Create new account
Given I am logged in as "user" user
And I am on "/user/settings"
And I click the ".new_account" element
The code snippet I use is this:
/**
* #Then /^I click on "([^"]*)"$/
*/
public function iClickOn($element)
{
$page = $this->getSession()->getPage();
$findName = $page->find("css", $element);
if (!$findName) {
throw new Exception($element . " could not be found");
} else {
$findName->click();
}
}
As an example, I would write something like this in my scenario:
Feature: Test Click
#javascript
Scenario: Clicking on spans
Given I go to "http://docs.behat.org/en/v2.5/"
And wait "3000"
When I click on "span:contains('behat.yml')"
And wait "3000"
Then I should be on "http://docs.behat.org/en/v2.5/guides/7.config.html"
I hope this helps.

Can two radio tags be used to set boolean values for a form property in struts?

I'm new-ish to struts and I'm particularly stuck on an area of struts code which has to do with the radio button. No matter what I do I can't get anything but a false value from the following: (CostForm)
<td align="left" width="200px" colspan="2">
<html:radio property="responsableBool" value="false"/>No
<html:radio property="responsableBool" value="true"/>Yes
</td>
It is then initialised from this piece of code:
CostForm costform = (CostForm) form;
Cost cost = new Cost();
costform.populateModel(cost);
and the populateModel just has: PropertyUtils.copyProperties(cost,this);
The only thing I can think of is that struts doesn't allow the radio buttons to reference the same property with different values.
Given the form:
public class CostForm extends ActionForm {
private boolean responsableBool; // And getter/setter
}
The HTML:
<html:form action="/costsub">
<html:radio property="responsableBool" value="false"/>No
<html:radio property="responsableBool" value="true"/>Yes
<html:submit/>
</html:form>
The action:
public ActionForward execute([args elided]) throws Exception {
CostForm costForm = (CostForm) form;
System.out.println(costForm.isResponsableBool());
// etc.
When I click "No" and "Yes" I get the expected boolean value inside the action.
I'd double-check things like spelling (the English spelling would be "responsible"; perhaps it's spelled correctly in Cost?), action/form mismatches (are you using the right form "name" in the action mapping?), and so on.