Selecting disabled default option with Thymeleaf - thymeleaf

I've got a select menu that I've created with Thymeleaf. I need the menu to have no default choice. Usually this is done with a disabled extra option, and that I have done too. Now, the issue is that I just cannot get the selected attribute to render into the resulting HTML. This appears to break IE, which then defaults to the first non-disabled option. This is what I've got:
<select th:field="*{serviceName}" required="required" >
<option th:selected="true" th:disabled="true" th:value="NOT_SELECTED" th:text="'Pick one'"></option>
<option th:each="entry : ${form.services}"
th:value="${entry.key}" th:text="${entry.value}">
</option>
</select>
and it renders like this:
<select required="required" id="serviceTechnicalName" name="serviceTechnicalName">
<option disabled="disabled" value="NOT_SELECTED">Pick one</option>
<option value="SERVICE1">Service One</option>
<option value="SERVICE2">Service Two</option>
</select>
What am I doing wrong? I've been fiddling with different combinations of these different options for at least an hour already, it shouldn't be this difficult...
FWIW, this appears to be a duplicate question, but the answers there aren't doing it for me. There also isn't an accepted answer there.

Apparently, when using th:field it does not work. Look at this post.
However, I do not think you have to use th:selected as there is no processing in the server.
Have you tryied something like:
<select th:field="*{serviceName}" required="required" >
<option value="" selected="selected">Selecione</option>
<option th:each="entry : ${form.services}"
th:value="${entry.key}" th:text="${entry.value}">
</option>
</select>

Well, the forum post that Kimy82 suggested goes deep down into some Java configuration hole, so the solution did not appeal to me.
I then upgraded my Spring Boot from 1.3.3-RELEASE to 1.4.0-RELEASE. Then I spent a while trying to upgrade Thymeleaf from version 2 to version 3, but apparently could not get all the dependencies and excluded transitive dependencies right.
So in the end I did this:
<script type="text/javascript">
window.addEventListener('load', function () {
document.getElementById('serviceTechnicalName').value='NOT_SELECTED';
});
</script>
Now, it's not the answer I was looking for, but it does the job...

Related

Materialize select input shows two carets

I've just integrated Materialize into my Rails project through the gem 'materialize-sass'. For some reason, the select inputs are showing two carets instead of 1.
The code for the select input is basically a fork of the example on their website.
<div class="input-field">
<select name="tutor_profile[dob_month]" id="tutor_profile_dob_month">
<option value="" disabled selected>Choose your month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label>Birthday</label>
</div>
I've tried tweaking the CSS styling for the select button in the Developers Console with no success. There are no additional stylings to any of the elements within the select input.
Other CSS frameworks I'm using are bootstrap, bootstrap-tagsinput, twitter-typeahead, and jquery-ui. I was wondering if anyone has experience something similar.
Short answer:
Add this to your css
.caret {
border-color: transparent !important;
}
Long answer:
Bootstrap implements the caret using css borders (right, top, left),
and materializecss implements the caret using the text "▼" as the inner html of the element.
Forcing a transparent border will cause bootstrap's caret to disappear, and will solve your problem.
If you insist on using bootstrap's caret, you will have to edit materializecss's javascript files, which is not recommended.
I have exactly same problem.
The reason is we combining bootstrap and materializecss fm, if you unload one of them, works right.
But the solution for them work together, i dont know =(
This is not the best answer. But i did this with JQuery.
I read the html generated in the console, then i noticed that those arrows are in one $(".caret").hide() Try this!
Remove the previous span with "caret" class before executing material_select,
this will restart the select tag in materializecss:
$(".caret").remove();
$('select').material_select();

Mark prepopulated select options as selected in asp.net razor

I am trying to do select an option in a select element. I tried the following code. But it does not work.
<select>
<option value="1" #(ViewBag.dt.Rows[0][1].ToString())=="1"? selected>A</option>
<option value="2" #(ViewBag.dt.Rows[0][1].ToString())=="2"? selected>B</option>
<option value="3" #(ViewBag.dt.Rows[0][1].ToString())=="3"? selected>C</option>
</select>
Any help?
Thank you.
Your conditional operators appear incomplete (invalid code).
Did you mean:
<option value="1" #(ViewBag.dt.Rows[0][1].ToString() == "1" ? "selected" : "")>A</option>
I would normally suggest switching to #Html.RadioButtonFor but that will not handle a two-dimensional array references. Are you display multiple items in a loop? You may be able to simplify the whole thing (please show the rest of your page/code).

Reset jquery ui selectmenu dropdown to default option

I have a dropdown select menu rendered via this code
#Html.DropDownListFor(m => m.OwnedItemId, Model.Plans, "Select a plan type", new {#class = "selectMenu", id="addPlanSelectmenu"})
In the view it looks something like this:
<select class="selectMenu" data-val="true" data-val-number="The field OwnedItemId must be a number." id="addPlanSelectmenu" name="OwnedItemId" aria-disabled="false" style="display: none;">
<option value="">Select a plan type</option>
<option value="143863">RetirementSaving (143863)</option>
<option value="143876">BankAccount (143876)</option>
<option value="143913">RetirementSaving (143913)</option>
<option value="143929">RetirementSaving (143929)</option>
<option value="144030">BankAccount (144030)</option>
...
</select>
I would like to go to the default option after submitting but I can't make it work. So far I have tried quite a few things, like the one proposed in this answer, using
$('#addPlanSelectmenu').selectmenu("value", "");
Funny enough to my understanding if I do something like this
$('#addPlanSelectmenu').selectmenu("value", null); //Or an unexisting value
it goes back to the last option of the list.
Any idea?
Thanks
Edit: I forgot to mention that I guess a clean way is just adding a value to the default text, but I don't even know if it's possible with these helpers
Edit 2:
I eventually made it work using this answer
Try this code:
$('#addPlanSelectmenu').selectmenu("index", 0);
Similar as resetting - the only solution working to me:
$('#resetButton').click(function() {
$("#Service").selectmenu('destroy');
$("#Service").prop('selectedIndex',0);
$("#Service").selectmenu();
})';
A little late to the party, however considering that all the other answers are either incorrect or incomplete, I'll throw in my 2 cents!
All you need to do is
$('.selectmenu').val(""); // your default option's value
$('.selectmenu').selectmenu("refresh");
Well in MVC #Html.DropDownListFor this worked for me using jquery.
if ('#resetButton').click(function(){
$("#id").select2('data', null);
}

Select option needs to change

<select name="noofseats" data-native-menu="true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4<option>
</select>
In the above code I'm not supposed to use data-native-menu , but, if I don't use it I'm unable to select the options on the android screen.
I'm using jquerymobile framework.
jquery mobile alpha4 uses native menus by default.
whatever the cost - update the jquery mobile version you use.
If the problem is that after an AJAX call you can't get options to display correctly - use .page() method.
Details here: http://jquerymobiledictionary.dyndns.org/faq.html

Freemarker hash for Struts2 #s.select tag's list property

I'm using Freemarker as the templating engine for a Struts 2 application and having some problems trying to pass a Freemarker hash to the #s.select tag's list value.
Currently I'm trying something like this in my template:
<#s.select name="myDropdown" list={"1":"Foo", "2":"Bar", 3:"Baz"} />
The resulting HTML that's rendered is this:
<select name="myDropdown" id="myDropdown">
<option value="freemarker.ext.beans.HashAdapter$1$1$1#2c9bebb">freemarker.ext.beans.HashAdapter$1$1$1#2c9bebb</option>
<option value="freemarker.ext.beans.HashAdapter$1$1$1#16ca4a">freemarker.ext.beans.HashAdapter$1$1$1#16ca4a</option>
<option value="freemarker.ext.beans.HashAdapter$1$1$1#173ee8">freemarker.ext.beans.HashAdapter$1$1$1#173ee8</option>
</select>
Based on the documentation it seems like this should work, but really the only examples are of using Freemarker lists. Hashes are only mentioned as another option, but I haven't been able to find any code examples that use them.
Ultimately my question is, what Freemarker syntax should I use with the Struts 2 select tag in order to render the following HTML?
<select name="myDropdown" id="myDropdown">
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="3">Baz</option>
</select>
Using the listKey and listValue properties of the select tag seems to do the trick.
The working code is now:
<#s.select name="myDropdown" list={"1":"Foo", "2":"Bar", 3:"Baz"} listKey="key" listValue="value" />
Seems like that should be taken care of automatically by the tag, but I was not able to get it to work without explicitly setting those two additional properties.

Resources