I'm testing out the tutorial in preparation of a project. I've noticed that the dropdown that is rendered for an Enum field has both the Localization text in both the value and text. Should it not have the enum integer value for value and the localization text for the text part? Am i missing a configuration setting?
See code below
<select class="custom-select form-control" data-val="true" data-val-required="The Status field is required." id="InvCategory_Status" name="InvCategory.Status"><option selected="selected" value="Yes">Yes</option>
<option value="No">No</option>
</select>
Same issue with:
https://github.com/abpframework/abp/issues/10167
You have to add resources with Key Enum:{EnumType}.{EnumName}
In your situation, let's say you have an enum like that:
public enum Confirmation
{
Yes,
No
}
And add resources of those values:
"Enum:Confirmation.Yes" : "Yes",
"Enum:Confirmation.No" : "No"
Related
I appreciate your passing by my post. I have searched here in StackOverFlow and google as well to fix my following code:
My HTML code:
<form th:action="#{/surgerywaitinglist/saveToWaitinList}"
th:object="${waitinglistDTO}" method="POST">
.
.
.
<select name="departmentName"
th:field="*{department.departmentName}"
th:with="departmentName = ${waitinglistDTO.department.departmentName}"
class="form-control" id="departmentJS">
<option value="" th:selected="selected"
th:disabled="disabled">select option
</option>
<option th:each="department: ${departments}"
th:value="${department.departmentName}"
th:text="${department.departmentName}">
</option>
</select>
.
.
.
<input type="submit" value="Save" class="btn btn-primary" />
</form>
form other posts like this post I found out that th:field and th:selected do not work together; in fact, th:field needs to be replace with something else. Notice that the th:object holds another object (from Department class) ...
My DTO class:
public class WaitinglistDTO {
private Long waitingListId;
#NotBlank(message = "Please enter a procedure")
private String waitingListProcedure;
private String waitingListDiagnosis;
private Long waitingListPatientId;
private Long waitingListSurgeonId;
private Long waitingListDepartmentId;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListAdditionDate;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListActualBookingDate;
private Patient patient;
private Surgeon surgeon;
private Department department;
Could you help me figure this out?
Many thanxxxxx :)
...
Update:
The following image explains how it should look,,, however, the default option should be the select option which should be somehow disabled
This is the result I get when I apply the suggested code of Rafael da Silva ,, you can see the pre-selected option is the first option rather than the select option option :)
you can do like this:
<select name="departmentName" th:field="*{department.departmentName}" th:with="departmentName = ${waitinglistDTO.department.departmentName}" class="form-control" id="departmentJS">
<option selected="selected" disabled="disabled">select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
this worked for me.
I don't see why you would add the selected to the blank option, the first option is always selected if your model object has nothing set and if it does normal behaviour would be to have that item selected, which th:field should resolve.
In case you want the select to always start at the default option, even if the model has another value or want to set it some other way. you can set th:id="*{department.departmentName}" and th:name="*{department.departmentName}" and than manualy handle th:selected.
As a side note theres no need to use the th version th:selected="selected" if using static values just selected or selected="selected would sufice in that case
Edit with code, not tested as i don't have my work pc where i am.
If you want to always have the first option selected even when editing with previous data
<select name="departmentName" th:name="*{department.departmentName}" th:id="*{department.departmentName}" class="form-control" id="departmentJS">
<option selected disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
If you want to fill with existing data but default to the first option
<select name="departmentName" th:field="*{department.departmentName}" class="form-control" id="departmentJS">
<option disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
I'm not 100% sure on the use of disabled but i think it should work, personally i would just leave it selectable and enforce a #notnull on your bean in controller validation.
the th:with annotation does nothing asfar i can see, what th:with is used for is defining a new variable for all elements nested inside the elment you define it on. example:
<div th:with="newVar='someString'">
<span th:text="${newVar}"></span>
</div>
I have a state dropdown menu which is working. I populate it with all the states and I get which state is selected. Now I need to rework it and make it available to select multiple states. I need a hint how can I get an arraylist of all the states that are multiple selected
<label for="state" class="label">State</label>
<select class="w-input" maxlength="256" name="state" data-
name="state" id="state" multiple="multiple">
<option th:each="state : ${states}" th:value="${state.getName()}" th:text="${state.getName()}" th:selected="${state.getName()} == ${questionnaire.getState()}"></option>
</select>
my controller:
model.addAttribute("states", stateService.getAllStates());
questionnaire.setState(body.get("state"));
I am looking for a way to set multiple states as an arraylist of Strings, because now I am getting only one String as a value, but not all the selected
My problem is that fetching data is failed.
Vehicle name is not appearing on UI, but data is out in console. How can I solve this?
Vehicle Type:
<select name="example">
<option value="NONE">...Choose...</option>
<option th:each="type : ${datalist}" th:value="${type.getName()}"></option>
</select><br/>
Add th:text="${type.getName()}" your option attribute
I've had to add a manual DropDownList within my Create View giving the user 2 options of 'input '.
Now the validation doesn't work when I come to save the information even though my code is now:
<div class="editor-field">
<select name="type" id="type">
<option value></option>
<option value="1" id="apple">Apple</option>
<option value="2" id="banana">Banana</option>
</select>
<span class="field-validation-valid" data-valmsg-for="type" data-valmsg-replace="true"></span>
How do I get the built in validation back on the 'Type'field. I have this as 'Required' within the model class.
your drop-down Name and ID should be a property of your model.
<select name="type" id="type">
include type as a Property in your Model and make it required.
public class myModel{
[Required]
public string type{get; set;}
}
being type a c# keyword I would suggest you to use something else as your property name for example "FruitDD"
I have a webpage containing input tags like the one below eg.
<input value='Cut' name='container_cut_button' type='submit/>
<input value='Copy' name='container_copy_button' type='submit/>
I want to put these into a dropdown, I was hoping it would be something simple like
<select onchange='submit()'>
<option name='container_cut_button'>Cut</option>
<option name='container_copy_button'>Copy</option>
</select>
but no such luck,
Anyone have any ideas about how this could be done?
Thanks in advance
Use the "value" attribute of the options rather than their name.
<select name="action">
<option value="cut_item">Cut</option>
<option value="save_item">Save</option>
</select>
On the server, you'll check the value of the variable "action." It will be either "cut_item" or "save_item".
I called a javascript function in the select tag ie. onchange="exec(value)", the function gets the select id and inserts the proper name attribute based on it value.
function exec(val){
if(val=='cut'){
document.getElementById("action").setAttribute("name", "cut")
}
}
This worked out ok