JSP + JQuery UI Selectmenu + default text - java

I have the next select on the view:
<div class="sort">
<label for="sort"><span>Sort by:</span></label>
<select name="sort" id="sort">
<option selected="selected" disabled="disabled" style="display:none;">Choose...</option>
<option
<c:if test="${pagination.sortOn eq 'time' and pagination.asc}">selected="selected"</c:if>
data-text="DESC" value="time"
data-order="asc">
DESC
</option>
<option
<c:if test="${pagination.sortOn eq 'time' and not pagination.asc}">selected="selected"</c:if>
data-text="ASC" />" value="time"
data-order="desc">
ASC
</option>
</select>
</div>
This is how I place JQuery widget on this select:
$('#sort').goodsListSelect({
width : 180,
appendTo : ".sort",
change : function() {
var option = $(this).find(":selected:not([disabled])");
if (option.val()) {
utils.reloadWithParams({
"page" : 1,
"sort" : option.val(),
"order" : option.attr("data-order")
});
}
}
});
The problem is I cant get working the first option "Choose...". It should be displaying only if user not choosen any other option.
I've tried the following answers, but they are not working for me:
HTML select: how to set default text which won't be shown in drop-down list?
How to show disable HTML select option in by default?
How such behavior may be achieved ?

In general, override the selectmenu widget like this
jQuery.widget(
'custom.selectmenu_with_title',
$.ui.selectmenu,
{
_setText: function( element, value ) {
if (element.hasClass('ui-selectmenu-text')) {
element.text('Whatever should be the title');
} else if ( value ) {
element.text( value );
} else {
element.html( " " );
}
}
}
);
and call this one instead the original.
$('#sort').selectmenu_with_title(....);
In your special case, you do not use the orignial selectmenu widget, but a custom version called goodsListSelect. So - insert the custom _setText method into the definition of your custom widget.

Related

Spring, Thyme: redirecting to <select> value

I have a small problem, I just need to redirect to the value of select like:
/results/name/Heli Redel
How would I go about doing that?
<div class="search">
<select th:required="true">
<option th:value="'Eha Raudreha'" th:text="'Eha Raudreha'"></option>
<option th:value="'Heli Redel'" th:text="'Heli Redel'"></option>
<option th:value="'Mait Kuusevaik'" th:text="'Mait Kuusevaik'"></option>
</select>
<a class="buttons" th:href="#{|/results/name/NAME_HERE|}"><button class="deleteBtn">Otsi</button></a><br />
</div>
Add a jQuery function, that when the button is clicked, it redirects to a another url.
jQuery(document).ready(function() {
$('.deleteBtn').on('click', function() {
var selectValue = $('.search').find('select').val()
window.location.replace("/result/name/" + selectValue);
})
})
I would add some ids to your elements to make it easier to fetch data.

Java servlet sending select value

I wrote the code below. I want to get element by id_proizvoda and get rest info of that input in a textarea inside of that servlet if selected.
My Code:
Statement st = conn.createStatement();
st.executeQuery("SELECT * FROM prodavnica.proizvodi;");
ResultSet rs = st.getResultSet();
out.print("<select id = 'izabrani' name = 'izabrani'>");
while (rs.next()) {
out.print("<option value = '");
out.print(rs.getString("id_proizvoda"));
out.print("'> ");
out.print(rs.getString("ime_proizvoda"));
out.print("</option>");
If I understood you correctly, what you want is show details of select option in a text area.
To do so, you need JS on your page to modify text area content depending on the choice of select option.
I created a fiddle to give you an idea. Here it is
Here is the sample HTML code:
<select>
<option value='' data-matr='tralala'>Select an option...</option>
<option value=1 data-matr='tralala2'>Option 1</option>
<option value=2 data-matr='tralala3' selected=''>Option 2</option>
<option value=3 data-matr='tralala4'>Option 3</option>
<option value=4 data-matr='tralala5'>Option 4</option>
</select>
<textarea id="result"></textarea>
And here is my sample JS code:
$('select').val(3);
$('select').on('change', function(){
var str="";
$( "select option:selected" ).each(function() {
str = $( this ).attr('data-matr') + " ";
});
$('#result').val(str);
});
All you need to do is to modify your java code slightly to add custom attributes into your options and add necessary JS code to your page to facilitate on change events.
Please note that I used JQuery.
I hope it helps.

JavaScript + Thymeleaf - select onchange

I have a list of objects services in my thymeleaf context, and I have the following at my page:
<select id="inputService" name="idService" size="1">
<option th:each="service : ${services}" th:text="${service.name}" th:value="${service.idService}"/>
</select>
<p id="selectedServiceLimits"></p>
Each object from services contains fields minAmount and maxAmount. How can I print into my p element the these two fields of the selected service in select by javascript? And how can I print these two fields of the option that is selected when document is ready?
Thanks!
<script th:inline="javascript">
/*<![CDATA[*/
function showLimits() {
var services = /*[[${services}]]*/ null;
var selectedIndex = $("#inputService option:selected").index();
var service = services[selectedIndex];
$("#amountLimits").text("Мин. сумма: " + service.amountMin + ", макс. сумма: " + service.amountMax);
}
$(function() { showLimits(); });
/*]]>*/
</script>
<select id="inputService" name="idService" size="1" onChange="showLimits()">
That's the solution

jsp fill in field on dropdown item changed

I'm trying to make it so that when an option from the combobox is selected it fills out some of the later input fields. current code (below) doesnt give anny errors just simply does not give output on item changed.
my question being how can I make it so that when selected item changes it fills in some fields.
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = e.options[e.selectedIndex].value;
document.getElementById("description").innerHTML = "selected: " + selOption;
}
</script>
</div>
for textboxes you need to use .value not innerHTML like below
document.getElementById("description").value = "selected: " + selOption;
you can use jquery code $('#selector').val(value); for that
Working Code
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = document.getElementById("optionbox").value;
alert(selOption);
$('#description').val(selOption);
}
</script>
</div>

How to print dropdown values of a select tag using javascript?

I'm having a dropdown for selecting cities of Tamil Nadu.
All the cities are in an array list and using a for loop, I am iterating the values and writing using document.write but still I'm not getting the values printed in dropdown.
<select>
<script>
document.writeln('&ltoption value="chennai">');
</script>
</select>
How to get the dropdown values printed now?
Thanks in advance!
Assuming you are using jquery :
Assuming your HTML is similar to this
<SELECT NAME="mylist">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</SELECT>
you need to modify your selector to iterate over the <OPTION> tags, your selector was iterating over the <SELECT> tag
var inputName = mylist;
$(':input[name=' + inputName + '] option').each(function(i, selected) {
alert($(selected).text());
});
if you need in java script :
<form>
<select id="myselect">
<option value="cat">Option 1</option>
<option value="dog">Option 2</option>
<option value="bear">Option 3</option>
</select>
</form>
<script type="text/javascript">
var selectobject=document.getElementById("myselect")
for (var i=0; i<selectobject.length; i++){
alert(selectobject.options[i].text+" "+selectobject.options[i].value)
}
</script>
Your option tag should look like this:
<option value="chennai">Chennai</option>
The code snippet you posted would produce an invalid (unclosed) option tag.
<select>
<script >
var list = [1,2,3];
for(i in list){
document.write("<option>"+list[i]+"</option>");
}
</script>
<select>
var list = ${cities}
I will give you a demo.
<?php
$city=array('Chennai','Madurai','Dindigal');//array containing cities
$count=1;
echo "<select>";
foreach($city as $value)
{
echo "<option value='city.$count'>".$value."</option>";
}
?>
Hope you understands.You can also use the id of each for other purposes in jsp
It's years since I've written anything in JSP and your question is lacking a bit in clarity but I think you're after something like this?
<%
String[] cityArray={"Chennai","Madurai","Dindigal"};
%>
That's just a an array of cities as an example - I assume you have your own
Then, in your page code
<select>
<%
int i=0;
for(i=0;i<cityArray.length;i++)
{
out.print("<option>" + cityArray[i] + "</option>");
}
%>
</select>
I've got nothing to test that with and the memory is a bit dim on jsp but is that what you mean?

Categories

Resources