How to select an option in a dropdown based on a value on the model using thymeleaf - spring-boot

I would like to select an option in a dropdown using a value in my Model (org.springframework.ui.Model), I know how to do it with th:object and th:field but what if I don't have an object and only a key/value in the model?
I'm using spring boot 2 and thymeleaf 3.
Thank you.

So if I'm understanding the question correctly you want to display values on your drop-down options first ( so that you could select one of them further) based on the selected Model.?
And May I know how you're selecting the Model , is it from UI ?
For example :--
You have selected a value in a HTML option( Values from your Model ), and based on that Selected Value you want to display the values further on another HTML-option which you can select further.

You don't need th:object and/or th:field to dynamically select a option. Just add your options to the model and use the th:selected attribute.
<select ...>
<option ...
th:each="op : ${myOptions}"
th:value="${op.myValueMember}"
th:text="${op.myTextMember}"
th:selected="${op.myTextMember == 'Chimichanga'}"
>
</option>
</select>

Related

Change grid attribute value on runtime in genexus

How can I change the value of the attribute in a grid on runtime?
For example, I have an IsActive attribute with a boolean datatype in a Transaction and I put it on a Grid in web panel. I want it to display as Text like 'Active' if the value is true and 'Inactive' otherwise.
Here's the screenshot: link
Attributes in WebPanels grids are readonly
You can add a variable in the grid... char(20),
in load code, set something like this:
iif(StaffIsActive, 'Active', 'Inactive')
You are using WW+, here is a help for this:
Grid Variable

th:selected for select tag in Thymeleaf not working

<select multiple="multiple>
<option th:each="vName : ${variety}"
th:value="${vName}"
th:text="${vName}"
th:selected="${selectedVariety}"></option>
</select>
In the above code "selectedVariety" is a string array sent from controller.
I'm not able to bind the select tag on edit.
And this select tag is not a part of entity table so th:filed="*{selectedVariety}" is not working.
Tried th:attr="selected=${selectedVariety==vName?true:false}">
Not working
On using this "th:selected="${selectedVariety}" every option in the dropdown is getting selected.
What may be the solution??
The option is selected when the value is included to the String array. You'll need following attribute within your <option>:
th:selected="${#arrays.contains(selectedVariety, vName)}"
It returns true (selected) if selectedVariety contains given vName or false (unselected) otherwise.

Laravel 5.4 - exists validation but not required

I have an 'array type' dropdown field in my form, e.g:
<select name="category_id[]">
<option value="">Please Select</option>
// more options
</select>
There are 3 of these same fields (hence it being an array type) and they are all optional, but if a value is selected it checks whether it is a valid value as follows:
$rules['category_id'] = 'exists:universities,id';
The problem I'm having is that if the empty option is selected, it is still giving me a validation error, e.g "The selected category is invalid." If I select a valid value I don't get any errors (as expected).
I have tried adding both nullable and sometimes to the validation rule but they don't make any difference. Do I need to do something different with it being an array type field?
If you use "array-like" name for your select, you should use array validation like so:
$rules['category_id.*'] = ['nullable', 'exists:universities,id'];
But if it's not multi select, you can change the name to category_id to make it work
Can you try <option value="" selected disabled>Please select</option>. Also what does dumping $request->category_id give you when no selections are made?

What is the way to do it with Vuejs

I have a page with 3 combos, 6 dependents inputs text ( if a special value is selected in combo, it will show, otherwise it will hide)
Then, I will have A text fields that is a computed property. Each time an input is changed, it will reevaluate this field value.
So, For instance, My fields are:
GradeIni, GradeFin, Category, AgeCategory, AgeIni, AgeFin , Gender (selects)
isTeam ( Checkbox )
CategoryFullName
So, for example, There is 5 predefines AgeCategory,and the 6th is Custom, when Selected, it show AgeIni and AgeFin
Each time a value is change, CategoryFullName is reevaluated.
My first answered question was how to get values from server.
I knew how to do it with Ajax, but in this case, it was easier to just use Server variable sent by Laravel when pages load.
So, the answer was 2 options:
#foreach ($grades as $grade)
<option ...>{{ $grade }}</option>
#endforeach
Or
<grades :grades="{{ $grades }}"></grades>
So, I would like to use the second one, but it means I have to create a component for each Select Option in my page, which seems a little heavy.
So, I'm a little bit confused about how should I make this page. Is it better by AJAX, is it better to be able to get data from laravel, and o make a component for each list, or is there a better way to do it????
You dont need to use many components. One component and one variable to keep the selected grade are fine.
You can create a component template to display all the grades.
I have created one template with dummy data to show you how you can do it.
<template id="grades-list">
Curently selected: Title {{selected.title}} Value: {{selected.value}}
<select v-model="selected">
<option v-for="grade in grades" :value="grade">{{grade.title}}</option>
</select>
</template>
The component should be registered like this:
Vue.component('grades', {
props: ['grades', 'selected'],
template: '#grades-list'
})
The tricky part is how you will select a default value and keep it synced with the parent. To do so, you can use .sync
<!-- you can use :grades="{{ grades }}" with Blade too-->
<grades :grades="grades" :selected.sync="selectedGrade"></grades>
To set default value you can update the selectedGrade variable when the document is ready, using vm.$set.
new Vue({
el: 'body',
data: {
'selectedGrade': ''
},
ready() {
this.$set('selectedGrade', this.grades[1])
}
})
I have created an example with dummy data here.

Getting value from dropdownbox's input in model

i have a dropdown box named f_chapter and id is also f_chapter . As it have different choices when user selects one of the choices , in model i can get the input by calling $this->input->post('f_chapter') . But i don't need this , I need the value of the input .
example:
<option value=""></option>
<option value="id1">Chapter1</option>
<option value="id2">Chapter5</option>
...................
Now if i want to grab the value in my model how should i get? as i don't need chapter1 ,chapter5......... rather i need id1,id2 ......... as these are my primary key ,i need them for database query.Please help . Advance thanks.
You will get the values by default without any change. I mean you will only get id1,id2,.. not chapter 1,2..

Resources