I'm building a view with Thymeleaf templates, which contains a form that provides a way to bind the value of my inputs with the attributes passed in the model. The backend was developed using Spring 4.
The following snippet includes an autocomplete datalist with the data of the namelist object, which was added to the model as an attribute. Said namelist is an ArrayList of a class with the fields int id and String name.
<form th:action="#{/}" method="POST" th:object="${example}">
<div class="form-group">
<input list="names" class="form-control" id="nameinput" th:field="${example.num.id}"> </input>
<datalist id="names">
<option th:each="row : ${namelist}" th:value="${row.id}" th:label="${row.name}">
</datalist>
<button>submit</button>
</div>
</form>
The value of the selected option is already bound to example.num.id, which is the expected and desired behaviour. However, when loading the view on a web browser (tested on latest Firefox and Chrome), it is represented like this:
As you can see, the id's are showing. However, I'm trying to emulate the behaviour of a <select>; the value should not be shown, just the text or label.
Is there a better way to achieve this? Am I not using the datalist properly?
Related
This works :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = document.getElementById('chk-products').checked">
But this doesn't :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = this.checked">
I was wondering why this isn't available in alpinejs's directives ?
With Alpine.js you don't have to inspect/mutate the DOM manually. It uses the data model: first you define some data, then you bind it to some input elements and let Alpine.js handle the DOM mutations, etc.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{showProducts: false}">
<input type="checkbox" x-model="showProducts" /> Show products
<div x-show="showProducts">Products are shown.</div>
<div x-show="!showProducts">Products are hidden.</div>
</div>
The this keyword is available inside a component created with Alpine.data() global function.
The x-on:click directive in Alpine.js is designed to execute a JavaScript expression when an element is clicked. In this case, the expression is trying to access the checked state of the checkbox element, which can be done more directly by using the this keyword to access the element that the directive is applied to. Unfortunately, Alpine.js does not support the use of the this keyword in its directives.
I need to get a value from the select component of my page and set its value as a parameter in the href.
<td class="body-item mbr-fonts-style display-7"><a th:href="#{/export(exportEntity='Person',semester='javascript:document.getElementById(\'semester\').value')}">Download</a></td>
Semeter variable has the value at my server side:
semester = javascript:document.getElementById('semester').value
and not the dropdown value.
Unfortunately, this code is not picking the value from the select component. Any guess what I have done wrong here.
Thymeleaf runs on the server, while JavaScript runs on the browser. You can't mix it like that.
It's difficult to say what to do, because your question is lacking context, specifically: What is the element with the id semester?
If it's a select element (or another form element), then it would be possible to use neither Thymeleaf nor JavaScript, but a simple form:
<form method="get" action="/export">
<input type="hidden" name="exportEntity" value="Person">
<select name="semester">
<option value="A">Semester A</option>
<option value="B">Semester B</option>
</select>
<input type="submit" value="Download">
</form>
Clicking on the button will have the browser generate an URL such as /export?exportEntity=Person&semester=A and go to it.
I'm using Jetstream blade components in my project, including x-jet-dialog-modal and x-jet-input. The modal window is used to add or edit records and works fine. The inputs are bound to a model "person" using the "wire:" syntax, and everything goes as expected.
Now I want to use the same modal window to show the record fields in a read-only manner, when pressing a "view" button. My idea is to make the inputs read only and hide the "save" button dynamically, using a public property of the Livewire controller (component).
So, in Livewire component I have a default value:
public $disableEdition = false;
And in the blade file:
<div class="mt-2">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" class="form-control" wire:model.defer="person.name" {{ $this->disableEdition ? 'readonly' : '' }}/>
<x-jet-input-error for="person.name" class="mt-2" />
</div>
I expected the input field to appear with attribute "readonly" (and of course non-editable and formatted with corresponding Bootstrap styles), but the browser inspector reveals that no attribute was added to the input.
Maybe you can help me with a solution or even a better approach to accomplish my goal.
Best regards.
I want to use a list element for drop-down select menu but it implemented everywhere with model. I use Spring I want the user to select items from a static list.
There are some use like
<form:select path="...." items=$(......)>
but it needs a model for items as I understood. Also I don't want to post anything I just need the value of the select menu and I will do everything with JS. How can I achieve this?
My List element:
private static String[] lang = {"en","fr","tr","es","de"};
I tried to use List like that but didn't work. I mean every form elements gone.
<form:form commandName="TranslateService">
<div class="form-group col-sm-6">
<label class="control-label" for="first-name">Target Languages<span class="required">*</span>
</label>
<div>
<form:select path="lang" items="${lang}"></form:select>
</div>
</div>
</form:form>
it's a hard way to solve your question. instead of this you can create a model for form.
I have a View in ASP.NET Core application where I have a form:
<div class="form-group">
<label asp-for="#Model.Property" class="col-md-2 control-label">Description</label>
<div class="col-md-10">
<textarea asp-for="#Model.Property" class="form-control" rows="10" data-val-maxlength-max="1000"></textarea>
<span asp-validation-for="#Model.Property" class="text-danger" />
</div>
</div>
I want to make textarea empty and Not to have the value from Model. I don't see any value property on this textarea.
Is it possible to have textarea mapped to #Model.Property but Not display it?
I'll be using this textarea for POST only and I don't want to display anything for GET. But I want to have other properties fetched so that's why I need the model in GET.
I also tried to change the Model property in controller before sending, but this model is a part of a DBSet and if I modify in controller then the DBSet gets affected.
Javascript is another option but I want to avoid that.
I had a look at How to overwrite one model property in ASP.Net core but this is not convincing.
Thank you.