unable to understand an example from developer.mozilla.org - http

In the following tutorial https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
There is an example (at the beginning)
<input type="file" id="input" onchange="handleFiles(this.files)">
Where does this.files come from?

this.files is the objects that correspond to the files selected by the user.

Related

When validate Q-Select with vee-validate 4, the use-input attributes is not working and don know why the value appearing twice

Here is my code
<Field
name="options"
rules="required"
v-slot="{ errorMessage, value, field }"
>
<q-select
filled
dense
use-chips
use-input
multiple
:model-value="value"
:options="state.options"
label="Filled"
v-bind="field"
:error-message="errorMessage"
:error="!!errorMessage"
/>
</Field>
How do I use the use-input attributes and remove the double value that display in the select field? Please help thank you.
Q-Select-validation
Issue solved Thanks to logaretm.
Because v-bind="field" is doing a bunch of even listening which conflicts with that component. The field object doesn't know the kind of the component/element so it tries to cover as much cases as possible by listing to input, change, update:model-value events. In that component case it is possible it emits both input and update:model-value because of the text input inside it.
You can fix it by being selective of what events should change the value with handleChange.
https://stackblitz.com/edit/vee-validate-v4-quasar-framework-gbma2c?file=src%2FApp.vue

jsViews and linkTo syntax

I'm using jsViews to build a small app.
I have a input form section in which I want to provide a cancel button and a save button.
My goal is very similar to the linkTo section of the documentation.
However, my data-link is a bit more complex. I didn't find the correct syntax to bind data back to my editing object.
Here's what I have:
<input type="text"
data-link="{:Data.ListName:Editing.ListName}
id{:'txtListName_' + #getIndex()}" >
The textbox is populated with my backend data, but when I submit my form, I can't see the updated value. Neither in Data.ListName property nor in Editing.ListName.
I also tried:
<input type="text"
data-link="{:Data.ListName} linkTo{:Editing.ListName}
id{:'txtListName_' + #getIndex()}" >
<input type="text"
data-link="{:Data.ListName} linkTo=Editing.ListName
id{:'txtListName_' + #getIndex()}" >
But none of this works. The documentation is unclear regarding my issue.
What's the correct syntax ?
Ok, I managed to find the correct syntax, which is :
<input type="text"
data-link="{:Data.ListName linkTo=Editing.ListName:}
id{:'txtListName_' + #getIndex()}" >

Spring Boot Thymeleaf - processing Form values

I'm learning Spring Boot+thymeleaf at the same time, so apologies if this is a noob question - however i haven't seen an example of what I'm trying to achieve.
I'm building a questionnaire of Question objects. Each Question object has properties like description, weightage, and a TreeMap of answer options with Pts for the answer as the Key, and the option text as the value.
The Question sequence to be displayed matters, and the option sequence matters as well(hence the TreeMap for options).
I iterate over the List of questions in the form like this(this shows just one question and iteration over the options for that question) :
<form action="#" th:action="#{/frm}" th:object="${scorer}" method="post">
<table>
<tr th:each="question, iterStat: ${questionList}">
<td th:text="${question.getQuestionText()}"></td>
<td>
<select th:field="*{answers}">
<option th:each="option :${questionList[iterStat.index].getAnswerOptions()}"
th:value="${option.getKey()}"
th:text= "${option.getValue()}">
</option>
</select>
</td>
</tr>
</table>
</form>
So, here are my questions:
Since the order of the answers is important for me(i need to send back text that is dependent on what they selected for each question), is there a way to retrieve(on POST) a sorted map of (question,chosen answer) in the order of questions displayed without having to name each question field?
What does the form-bound bean need to look like? I guess I'm also looking for some insight into how Spring Boot does its magic here?

jQuery Validate formatting rules for range limits

I have a large table of text inputs for which a set of custom attributes are being created on the server side. These attributes included "min" and "max" which were used with the jQuery Validate plugin.
Due to a change in the requirements (of course), we now have to update the attributes to a range type, however the Validate plugin isn't interpreting the formatting of the range rule correctly (or perhaps it's more accurate to say I'm not formatting the rule correctly) and now I have problems.
The generated output for the input boxes looks like this:
<input type="text" producttype="CCC" code="ESTFEE" range="460, 500" class="currency required" id="txtEstFeeCCC" value="460.00" name="txtEstFeeCCC">
I've also tried the following:
<input type="text" producttype="CCC" code="ESTFEE" range="[460, 500]" class="currency required" id="txtEstFeeCCC" value="460.00" name="txtEstFeeCCC">
In either case, the message returned is either:
Please enter a value between 4 and 6.
or
Please enter a value between NaN and 4
respectively. Neither of which has anything to do with the 460 - 500 range in question.
The jQuery code calling the validate function is just the vanilla call:
$("#btnSave").click(function() {
validator.form();
...
});
How should an input attribute for jQuery Validate range be formatted so that the correct number range limit is displayed?
You should be able to do:
<input type="text" id="field1" name="field1" class="{required: true, range: [460, 500]}">
You could, of course, always just store the values as a range but output as min and max properties still

How is the Spring MVC spring:bind tag working and what are the meanings of status.expression and status.value?

Let's discuss on the following example:
<spring:bind path="user.userName">
<input type="text" name="${status.expression}" value="${status.value}"/>
<span class="fieldError">${status.errorMessage}</span>
</spring:bind>
When this view snippet gets rendered, what do ${status.expression} and ${status.value} get evaluated to? Where do these values come from?
See this link for an explanation of what the status variables mean.
status.expression: the expression that was used to retrieve the bean or property
status.value: the actual value of the bean or property (transformed using registered PropertyEditors)
status.errorMessages: an array of error messages, resulting from validation
The status object is evaluated when the binding is done.
Also have in mind that Spring 2.0 introduced new form tags, which are probable better suited for your needs.
The bind tag documentation of Spring 3.0
See Also: BindStatus

Resources