I have the following html:
<label wicket:id="drugSearchResult.row.item.label" for="drug_1">[Drug XYZ]
<span wicket:id="drugSearchResult.row.item.info">[Information, Price, Other]</span>
</label>
But label element are not allowed to add a child component.
Is there any way to achieve this html requirement?
This is the designer's requirement:
Drug XYZ // label
Information, Price, Other // span
Make sure you're using FormComponentLabel for the <label> element instead of Label.
Label's purpose is to output text inside the associated element (it can be a <span>, <div> or almost any other tag).
FormComponentLabel's purpose is to model <label> tags. They receive the FormComponent they're related to and automatically output the for attribute with the proper value for the dom id attribute.
Take a look at the Wicket wiki page on Form control labels. They're adding components to FormComponentLabel there.
If you'd like to avoid using FormComponentLabel at all, you shouldn't be giving it a wicket:id attribute, and manually set the DOM id attribute of the element the <label> is going to refer to. Then just use it in the for attribute of the <label>.
For instance:
HTML
<input wicket:id="drug">
<label for="drug_1">[Drug XYZ]
<span wicket:id="drugSearchResult.row.item.info">[Information, Price, Other]</span>
</label>
Java
TextField drug = new TextField("drug");
drug.setMarkupId("drug_1"); // Make sure this ID is unique in the page!
drug.setOutputMarkupId(true);
add(drug);
Label drugDescription = new Label("drugSearchResult.row.item.label", aModel);
add(drugDescription);
Using properties and <wicket:message>
For me, the approach below is useful.
In my project, I have only one location per page where the text for the <label>s and validation messages is defined. It's the properties file of the web page.
The additional <div>s and their class attributes are from Bootstrap.
<div class="form-group required">
<label wicket:for="customer.name1">
<wicket:message key="customer.name1"/>
</label>
<div class="controls">
<input type="text" wicket:id="customer.name1" required class="form-control">
</div>
</div>
Java
add(new RequiredTextField<String>("customer.name1")
.setLabel(new StringResourceModel("customer.name1")));
customerPage.properties
# siehe wicket-core-7.9.0-sources.jar!/org/apache/wicket/Application_de.properties
Required='${label}' ist erforderlich
customer.name1=Name 1
customer.name2=Name 2
customer.department=Abteilung
customer.phone=Telefon
customer.active=aktiv
Related
Experienced with Java, pretty new to Selenium, locators, etc.
Buried deep in some HTML is several similar divisions:
<div tabgroup="topTabs__County Summary" sectiongroup class="field TextDescription tab">
<label for="request_48543">
<span class="label">Monument</span>
</label>
</div>
<div tabgroup="topTabs__County Summary" sectiongroup class="field DropDownList readonly tab">
<label for="request_48543">
<span class="label">Geolocation</span>
</label>
</div>
<div tabgroup="topTabs__County Summary" sectiongroup class="field SingleLineText tab">
<label for="request_48543">
<span class="label">Intersection</span>
</label>
</div
I need some Selenium magic to find a label with a specific value then backtrack to find that label's division and from that division extract the value of a given attribute. Drilling down seems fairly easy but how does one "back up" ?
For example, given "Geolocation" I'd like to extract "field DropDownList readonly tab"
I've tried things like
WebElement chill = m.findElement(By.xpath("../..//span[text='Geolocation']"));
to no avail
You reversed the order of going to the parent element, and you need () in text. The xpath should be
"//span[text()='Geolocation']/../.."
Another option is to look for an element that has a chilled with "Geolocation" text
"//div[.//span[text()='Geolocation']]"
this might give you more results, depends on the html structure that is not in the question. In that case you can add unique attribute, for example tabgroup
"//div[.//span[text()='Geolocation']][#tabgroup]"
this will return only <div> tag that has tabgroup attribute.
To extract the data use getAttribute("class") on chill WebElement
I have been doing school's project recently and started learning Java Web/Spring/Bootstrap and stuff only a week ago, so please do forgive and correct me if I got any idea wrong.
So I was working on some webpage following an online tutorial and it's really great that I can fetch user's input by using Thymeleaf tags like codes below
<div class="ip input-group" align="center">
<input id="username" type="text" class="form-control" name="username" placeholder="Username" th:value="*{username}"/>
</div>
Though I'm having a hard time trying to fetch input from select box or radio button like codes below (am I doing anything wrong here?)
<div class="input-group">
<select class="btn btn-default" th:value="*{sex}">
<option>Male</option>
<option>Fmale</option>
<option>Other</option>
</select>
</div>
Since it's able to fetch input from simple input area, I'm thinking that there should be a way to acquire input or data from select box or radio button by using Thymeleaf?
th:field tag should be in <select> tag, but it does not exist.
th:value tag should be in <option> tag, not in <select> tag.
As described in thymeleaf docs:
Select fields have two parts: the tag and its nested
tags. When creating this kind of field, only the tag has to
include a th:field attribute, but the th:value attributes in the
nested tags will be very important because they will provide
the means of knowing which is the currently selected option (in a
similar way to non-boolean checkboxes and radio buttons).
Code snipped in source
I'm trying to use thymeleaf to generate edit and delete modals for each element in the model in my ModelAndView using th:each.
The modals are indeed created and have unique ids based on the id field of the elements. The problem I have is none of the values from elements are parsed into the inputs to enable the user to see the current values.
They are obviously there because the view also has a table which displays each element's values along with the anchors which toggle the modals.
Here's some example code of how I'm doing it:
<div th:each="f : ${foos}" th:id="um- + ${f.id}" class="modal fade"
tabindex="-1" role="dialog">
...
<form role="form" th:action="#{/foo/update}" th:object="${foo}" th:method="post">
<input type="hidden" th:field="*{id}" th:value="${f.id}"/>
<fieldset class="form-group">
<label for="bar">Bar</label>
<input th:field="*{bar}" th:value="${f.bar}" class="form-control"
id="bar" type="text" placeholder="Bar"/>
</fieldset>
...
</form>
...
</div>
How to generate edit modals for each element in the model? I'm not sure why thymeleaf is unable to get the values of the fields from the model elements.
That's not a great approach actually. In addition to it not working, doing using a loop obviously creates n modals for the collection.
The solution that worked best was to provide a single modal that would be populated and submitted with Ajax calls.
This no-frills Spring Boot app has all the relavant code.
I want to place two separate file upload panels on page, one is for images, another for other files. Each panel contains a form with AjaxButton inside. First I developed the first panel, it worked as expected. But when I added another one, the second AjaxButton inside a form is not responding when clicked. Instead, when I click on the first button, the second one responds. What could be the reasons for that?
Here's the first panel's HTML:
<wicket:panel>
<div wicket:id="form-container-img">
<form wicket:id="form-img">
<img wicket:id="releaseImage" class="thumbnail" />
<p>
<label>Select file :</label>
<input wicket:id="fileUpload-img" size="40" type="file"/>
<input wicket:id="uploadButton-img" id="uploadButton" type="submit" value="Upload" />
</p>
</form>
</div>
</wicket:panel>
And the second one:
<wicket:panel>
<div wicket:id="form-container-album">
<form wicket:id="form-album">
<span wicket:id="releaseName" />
<p>
<label>Select file :</label>
<input wicket:id="fileUpload-album" size="40" type="file" />
<input wicket:id="uploadButton-album" id="uploadButton" type="submit" value="Upload" />
</p>
</form>
</div>
</wicket:panel>
So now, when both panels are in place, clicking uploadButton-album does nothing but it responds by clicking uploadButton-img.
EDIT:
<wicket:panel>
<div wicket:id="uploadPanelReleaseImg"></div>
<div wicket:id="uploadPanelReleaseAlbum"></div>
</wicket:panel>
In html markup, the id attribute should always be unique on the page. I'm not sure it's required by any spec, but it's generally regarded as good practice, and things tend frequently to depend on it.
If you need to control the id (because you're referencing it in JavaScript and it's easier than figuring out what id Wicket generated), you need to manage this manually.
If you simply omit the id attribute, Wicket will generate one based on the wicket id, and guarantee uniqueness on the page.
Based on the comment thread, this appears to have been the problem.
I am trying to determine which of two radio buttons is selected and based on that select the other one. I'm using Java and selenium.
My HTML is:
<div class="row span-670px">
<h3>Turn on</h3>
<div class="field-row">
<div class="field-wrap radio-row clearfix ">
<input type="radio" name="choosePaymentModel" value="QUOTEHOLD" checked="checked" />
<label>
...
</label>
</div>
</div>
<div class="row last span-670px">
<h3>Turn off</h3>
<div class="field-row">
<div class="field-wrap radio-row clearfix ">
<input type="radio" name="choosePaymentModel" value="BASIC" />
<label>
...
</span>
</label>
</div>
</div>
The only thing that differs is the value attribute. The checked attribute will change based on which one is checked, so the only clear way to differentiate the two is by value. I can't seem to find the proper syntax to grab the correct radio buttons. When utilizing the IDE, the element identifiers swap out with each other depending on the selection so nothing is every unique.
Suggestions?
I had to use:
element = driver.findElement(By.xpath("//input[#name='choosePaymentModel' and #value='QUOTEHOLD']"));
and
element = driver.findElement(By.xpath("//input[#name='choosePaymentModel' and #value='BASIC']"));
to determine which was selected, but unfortunately the click methods did not work on them.
When playing with the IDE was lucky enough to find two separately bizzare elements to click on, which were not in fact elements that contained the "isSelected" values.
In either case, looks like I found the answer to my own problem.
String tempvalue[]=object.split(Concrete.VALUE_SPLIT);
//here I am splitting the values passed through data sheet against radio buttons
String Val_radio =Browser.driver.findElement(By.xpath(OR.getProperty(tempvalue[0])+data+OR.getProperty(tempvalue[1]))).getAttribute("value");
System.out.println(Val_radio);
Boolean radio = Browser.driver.findElement(By.xpath("//input[#name='radio' and #value="+"'"+Val_radio+"'"+"]")).isSelected();
if(radio.booleanValue()==true){
//do something here
}