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.
Related
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?
I have the following HTML snippet:
<input type="text" id="manufacturer" list="manufacturers" placeholder="Search by manufacturer name or supplier code" class="form-control form-control-2-3" value="" name="manufacturer">
<datalist id="manufacturers">
<select>
<div>
<option value="Jaguar">AA</option>
<div></div>
</div>
<div>
<option value="Audi">AB</option>
<div></div>
</div>
<div>
<option value="Mercedes">AC</option>
<div></div>
</div>
</select>
</datalist>
It's a dropdown menu and I want to select one of the options. No matter what I try with any find command or select function. I always get the same error:
Selenium::WebDriver::Error::ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
Does anyone have any suggestions on how to scope to those options and select one?
Thanks.
What you're trying to do isn't currently possible because it's not actually a dropdown select element. The <datalist> option elements are never actually visible on the page because the standard states "In the rendering, the datalist element represents nothing and it, along with its children, should be hidden." - https://html.spec.whatwg.org/dev/form-elements.html#the-datalist-element . Instead any <option> elements in the datalist are just used as autofill suggestions for the input element (but don't actually restrict the value a user can input in any way). Because of this and since the datalist user can just type anything they want into the input element you can set the input value like any other text input.
fill_in("manufacturer", with: 'Jaguar')
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
I have a drop down list and a form with a few textboxes. I would like to populate this form with details of selected item in the drop down list.
I'm doing this in java MVC app (or wannabe) and I have in my jsp page something like this:
<select name="item">
<c:forEach items="${persons}" var="selectedPerson">
<c:set var="person" value="${selectedPerson}" />
<option value="$selectedPerson.id">${selectedPerson.LastName}</option>
</c:forEach>
</select>
Persons is a list of the Person class.
I wonder is it possible to use the variable 'person' directly to fill the form, for example:
<textarea name="name" rows="1" cols="34" >
${selectedPerson.Name}
</textarea>
so that the rest of the form updates when the selectedPerson is changed?
I know how to do this within c#, but I don't have experience with java technologies.
Is it necessary to submit the form to servlet to do this, or it can be done on the client, since I have all my data in the persons list, from the moment of populating the drop down list?
The ${} syntax is JSP syntax, which will only be parsed and run once on the server to generate the HTML, and then sent down the wire as HTML. The changes to the select list then just happen in the client browser: the server doesn't know anything about them.
What you want to do is register a javascript listener on the select box. You should look into using a library ideally to help you do this. JQuery is a very popular solution and is worth reading up on if you're going to be doing this type of development.
If you end up using JQuery, you'll want to do something like the following
<select id="item" name="item">
<c:forEach items="${persons}" var="selectedPerson">
<c:set var="person" value="${selectedPerson}" />
<option value="$selectedPerson.id">${selectedPerson.LastName}</option>
</c:forEach>
</select>
<input name="lastName" id="lastName" type="text"/>
<script type="text/javascript">
$(function() {
$("#item").change(function() {
$("#lastName").val($("option:selected", this).text());
});
});
</script>
This will make more sense once you've read a basic JQuery tutorial, but basically what it does is that each time the select list changes value, it gets the selected option and sets it's content to the lastName input field. Hope this helps.
I have two dropdowns, the second dropdown does not show until a choice is made from the first one. Using watir, i can select the first dropdown, and when i watch it, the second one becomes active, but it cannot select it. i just tried the regular select_list using name and id. Here is the code for the second drop down.
<td>
<input type="hidden" value="1" name="list" id="list">
<script type="text/JavaScript" language="JavaScript"></script>
<select>
<option value="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
I've also notice the value for the hidden field change as i select different options.
Thanks for any help
The way that I usually access drop down lists is by using this string:
#browser.select_list(:name, "list").set("3")
Does this help?
I usually select hidden dropdowns this way
ie.hidden(:name=>"list").value='2'
Try this:
browserObj = Watir::Browser.new
browserObj.goto('you html in browser')
//browserObj.hidden(:id,"list").value
browserObj.select_list(:name, "list").select_value('2')