I am trying to get a list from datatbase using Freemarker. I want to make select dropdown list, but I don't undestand what I missed.
I did this:
<div class="form-group">
<select name="category" class="form-control" required>
<#list categories! as category>
<option value="${category.id}">${category.name}</option>
</#list>
</select>
</div>
I have a form but I don't see any options.
With Thymeleaf I could do this but in the project I want to use freemarker
<div class="form-group">
<select th:field="*{category}" class="form-control" required>
<th:block th:each="category : ${categories}">
<option th:text="${category.name}" value="${category.id}"/>
</th:block>
</select>
</div>
In fact I need "translate" this part from Thymeleaf to Freemarker and I don't know how.
Yes, the code fragement was correct, I just placed in a PostMapping instead of GetMapping. Now it works good with controller below:
#GetMapping("/items")
public String main(Model model) {
Iterable<Item> items;
model.addAttribute("items", items);
List<Category> categories = categoryRepository.findAll();
model.addAttribute("categories", categories);
return "items";
}
Related
After adding a new div, select2 class is deleted.
I have a form with wire:submit.prevent="sendMessage"
<form wire:submit.prevent="sendMessage" method="POST">
The form has a select2 and it works perfectly, except one moment, when I click on a button. A page does not reload, because of wire:submit.prevent. And when message is sent, I add a new div.
#if($sent)
<div class="alert alert-success">
A message was sent successfully
</div>
<div wire:poll="reuse"></div>
#endif
I checked this code without new div and it works great, however it does not matter which element, when I just try to add something new, class select2 is deleted.
Also I have added wire:ignore, and in this case it doesn't work
<div wire:ignore>
<select wire:model="type" name="type[]" class="select2" multiple>
<option value=""></option>
#foreach($types as $type)
<option value="{{ $type->id }}">{{ $type->title }}</option>
#endforeach
</select>
</div>
I have tried a lot of different methods, and only one works perfectly. I added an ID to the where select is. Now it looks like
<div wire:ignore id="select2">
<select wire:model="type" name="type[]" class="select2" multiple>
<option value=""></option>
#foreach($types as $type)
<option value="{{ $type->id }}">{{ $type->title }}</option>
#endforeach
</select>
</div>
Tried to validate dropdown select box but not working. May be css issue? So How to validate it. If anyone knows please help to find the solution.
Demo: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.component.html
app.component.html:
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state" [ngClass]="{'invalid-textbox' :signUpForm.submitted && !state.valid }">
<option>Select</option>
<option *ngFor="let optionName of formFields" value="{{optionName}}">{{optionName}}</option>
</select>
</div>
app.component.css:
input[type=text].invalid-textbox,
select.invalid-textbox,
input[type=password].invalid-textbox {
border-bottom: 2px solid #ed5558;
}
I got this working in the stackblitz. Template-driven forms use basic html validation so you had to add the required attribute. I also changed !state.valid to state.invalid in [ngClass]. The last thing I did was add an empty string for the value attribute and the selected attribute to initialize the ngModel state.
HTML Template
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state"
[ngClass]="{'invalid-textbox' : signUpForm.submitted && state.invalid }" required>
<option value="" selected>Select</option>
<option *ngFor="let optionName of formFields" [value]="optionName">{{optionName}}</option>
</select>
</div>
Component
model: any = {
state: ''
};
This should respond now if a user deselects a state option and tries to submit it.
I have a controller with following method. I can add a property 'sort' to my form and it will automatically use that property to sort. Now I'm trying to add the sort direction to it, but I can't seem to find the correct request param to add to my form.
public String overview(Criteria criteria, #PageableDefault(sort = "name") Pageable page, Model model)
This is my form:
<form action="">
<div>
<label for="sort">Sort by</label>
<select name="sort" id="sort">
<option value="name" selected>Name</option>
<option value="description">Description</option>
</select>
</div>
<div>
<label for="ascending">
<input name="order" id="ascending" type="radio" value="ASC" />
<div>Ascending</div>
</label>
<label for="descending">
<input name="order" id="descending" type="radio" value="DESC" />
<div>Descending</div>
</label>
</div>
<div>
<button type="submit">Search</button>
</div>
</form>
The url looks like this:
/overview?sort=name&order=DESC
I've tried some other parameter names than order, but nothing seems to work.
Extend your controller method like this:
public String overview(Criteria criteria, #PageableDefault(sort = "name", final #RequestParam(value = "order", defaultValue = "ASC") String order, Pageable page, Model model) {
// process the order argument here
}
Now you can process the argument "order".
The direction should be appended to the sort query parameter such that it will look like this
/overview?sort=name,DESC
Just repeat for multiple sort fields like
/overview?sort=name,DESC&sort=description,ASC
Tried to insert a "select" component under a tab. Basically, the tab just displays some dynamic forms. The select is a list of string for user selection Looks like my definition is correct. Do not know why it messed up the whole angular/clarity UI page.
<clr-tab>
<button clrTabLink>Submission Form</button>
<clr-tab-content>
<br>
<label class="required" for="uniqueCertIDs">Unique Cert IDs</label>
<div class="select">
<select id="partnercertIDs" formControlName="EEPortalProductDetails">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}} </option>
</select>
</div>
Very likely, the scope of the select portion is not correct. Failed finding related documentation.
It's difficult to say whats happening without a running example.
I created a simple form with a select in a tab and it seems to be ok.
Here is the template code for my tabs:
<clr-tabs>
<clr-tab>
<button clrTabLink id="link1">Tab1</button>
<clr-tab-content id="content1" *clrIfActive>
<h3>Form 1</h3>
<form>
<div class="form-group">
<label for="selects_1">This is a select box</label>
<div class="select">
<select id="selects_1">
<option>Select</option>
<option *ngFor="let user of users" [value]="user">{{user}} </option>
</select>
</div>
</div>
</form>
</clr-tab-content>
</clr-tab>
</clr-tabs>
You can see this running here: https://stackblitz.com/edit/so-tabs-form-select
If this doesn't solve your issue, can you fork the StackBlitz and recreate it there?
<form [formGroup]="partnersForm" >
<div class="form-group">
<label class="required" for="selects_1">Unique Cert IDs</label>
<div class="select" >
<select id="selects_1" formControlName="partnerFormCertIDs" ng-change="selectAction()">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId" >{{ucertID.UniqueCertId}}</option>
</select>
</div>
</div>
</form>
and in my Session.ts file. Debug using console, the alert never shows up
selectAction() {
alert("selected value changed !!!!");
}
#nextgen-ui Regarding your second issue, the data binding syntax should be either on-change or (change); ng-change is an AngularJS directive.
Please see this Stackblitz.
#Jose Gomes
The event is defined as updateCertData()
<form [formGroup]="partnersForm" >
<div class="form-group">
<label class="required" for="selects_1">Unique Cert IDs</label>
<div class="select">
<select id="selects_1" formControlName="partnerFormCertIDs" (change)="updateCertData()">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}}</option>
</select>
</div>
</div>
</form>
And I defined a POST API in the event
updateCertData(){
let selectedCertID = this.partnersForm.get('partnerFormCertIDs').value;
for ( let partnerInfo of this.uniquecertIDs) {
if(partnerInfo.UniqueCertId == selectedCertID){
this.extractSubmit(this.cert);
this.submit[0].Option[0].value = partnerInfo.ProductId;
this.submit[0].Option[1].value = partnerInfo.ProductName;
this.certsService.setSubmissionProduct(this.certId, this.submit);
break;
}
}
}
this.certsService.setSubmissionProduct is a POST API, sending data back to UI Server
setSubmissionProduct(sessionId: string, info:any){
let body = {'submitConfig': info};
let url = GLOBALS.baseUrl + "session/" + sessionId + "/submitproduct";
return this.post(url, body);
}
The this.post never sends message to the controller successfully. I tried several other post methods, which works well in other logic part, but never sends message successfully if it is put within this "change" event.
My JSP snippet is as follows:
<form:select path="rules[${counter.index}].assignedTo.assignedToName">
<form:options items="${assignmentRulesForm.assignedToList}"
itemLabel="assignedToName"
itemValue="assignedToName"/>
</form:select>
The assignedTo property refers to this object:
public class AssignmentDTO {
private String assignedToName;
// No other members
assignedToList then is a List<AssignmentDTO>
Really, what I want to happen is for the drop-down to contain all entries in the assignedToList, but to select the value associated with rule[i].assignedto.assignedToName
Presently, what I am seeing is that it does not perform the selection part, and the first item in the drop-down is displayed.
Any help is appreciated.
Thanks
This should work for you, the path is not the name but the assignedTo:
<form:select path="rules[${counter.index}].assignedTo">
<form:options items="${assignmentRulesForm.assignedToList}"
itemLabel="assignedToName"
itemValue="assignedToName"/>
</form:select>
If you have implemented a .equals for your assignedTo, it should just work.
<html>
<head>
<script>
function show() {
var op= window.document.getElementById('select');
var selItem= op.options[op.selectedIndex].value;
if(selItem=="Others") {
document.getElementById('text').style.visibility = 'visible';
}
else {
document.getElementById('text').style.visibility = 'hidden';
}
}
</script>
</head>
<select id="select" onchange="show();">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="Others">Others</option>
</select>
<br>
<input type="text" id="text" style="visibility:hidden">
</html>