Is it possible to set a variable in thymeleaf and then change it depending on an option in a select element and then display a specific div based on the selection? Here's what I mean.
I have three options in select:
1) DESKTOP_PC
2) LAPTOP_PC
3) TABLET_PC
When the user selects DESKTOP_PC, I would like to show the div with the related inputs for it. Likewise if it's LAPTOP_PC or TABLET_PC.
Only problem is, I'm not sure how I would go about doing this.
The other thing, is that I have the following:
In my entry class I have an enum class:
public static enum Type {
DESKTOP_PC,
LAPTOP_PC,
TABLET_PC
}
In my Thymeleaf form, I have the following to access and display this enum:
<div class="section-question">
<p>Type</p>
<select name="type" th:field="$*{type}">
<option th:each="type : ${T(com.project.entities.Entry.Type).values()}" th:value="${type}" th:text="${type}" ></option>
</select>
</div>
Any help would be much appreciated!
Thanks
it is very possible, but has very little to do with Java or Thymeleaf, even though you could do it with them too (not recommended)
All you need to do is create basic JavaScript function that onClick to different options makes different divs visible (through adding/removing classes with css defined in them like display: none;).
Of course you could implement it on backend, through each click being a separate request sent to a controller that then saves the option into a for example boolean variable and based on this variable returns a different thymeleaf view but that is an awkward looking solution for such simple case that doesn't really require backend processing.
Any simple book on JS will show you how to do this, I can recommend A smarter way to learn JS for this scenario
To achieve what you want we need to to take help of Javascript or jQuery.
Write an onchange function on select tag.
Get the value of option selected inside the function.
Show/hide div depending on value
Vote if it helps you
Related
The goal is to reproduce the following with wicket:
<select wicketid="mySelect">
<option data-img="123">test1</option>
</select>
Problem is that I dont know how many options will be there, so options must be made dynamically.
I tried dropdownchoice with passing a list to it. it generates the options correctly but I have no way of inserting the data-img attributes in them. The ChoiceRenderer only works for id and value.
I also tried using AttributeAppender, but for that I need to know the exact number of options and each must have a predefined wicketid.
Any idea how I could do this?
You can override org.apache.wicket.markup.html.form.AbstractChoice#setOptionAttributes().
Or you can use org.apache.wicket.extensions.markup.html.form.select.Select with org.apache.wicket.extensions.markup.html.form.select.SelectOption.
I'm running test automation software that will rely on "id" tags to recognize controls.
I'm developing in java on eclipse using the GWT plugin and have tried using both of the below methods to set the id tag for a button "add".
add.setId("addId");
DOM.setElementAttribute(add.getElement(), "id", "addId");
neither of these are modifying the id property correctly. Have you had this problem before or do you know a workaround?
Thank you for any help!
Jerry
If I remember correctly, several browsers (or probably just Internet Explorer) won't let you set a DOM element's ID after it has been appended to the DOM. This limitation would be there even if you are directly doing this hand coded javascript. The browser won't show any error on setting id attribute but won't update the attribute either.
So you need to set the ID before appending the element to the DOM.
EDIT
From discussion below it appears that you were assuming that setting ID on Button widget's DOM element will set the ID on a <input type="button"> DOM element. But this assumptions is not proving to be correct because Button widget wraps the <input type="button"> DOM element in other DOM elements (like table or div).
EDIT
You may want to try Button.wrap(element) method if you want to customize the input type="button"> element. First create (DOM.createButton()) or locate a DOM element, set it's id, and wrap it using Button.wrap(element)
Long time ago I had Selenium test suite for a GWT app and I used ensureDebugId method to set the ID.
Edit - It still seems to be part of the API
I'm working on a web project which uses JSF 2.0, PrimeFaces and PrettyFaces as main frameworks / libraries. The pages have the following (common) structure: Header, Content, Footer.
Header:
The Header always contains the same menu. This menu is a custom component, which generates a recursive html <ul><li> list containing <a href="url"> html links, this is all rendered with a custom renderer. The link looks like 'domain.com/website/datatable.xhtml?ref=2'. Where the ref=2 used to load the correct content from the database. I use prettyfaces to store this request value in a backingbean.
Question 1: Is it ok to render the <a href> links myself, or should I better add an HTMLCommandLink from my UIComponent and render that in the encodeBegin/End?
Question 2: I think passing variables like this is not really the JSF 2.0 style, how to do this in a better way?
Content:
The content contains dynamic data. It can be a (primefaces) datatable, build with dynamic data from the database. It can also be a text page, also loaded from the database. Or a series of graphs. You got the point, it's dynamic. The content is based on the link pressed in the header menu. If the content is of type datatable, then I put the ref=2 variable to a DataTableBean (via prettyfaces), which then loads the correct datatable from the database. If the content is of type chart, I'll put it on the ChartBean.
Question 3: Is this a normal setup? Ideally I would like to update my content via Ajax.
I hope it's clear :)
It's ok to just output link yourself, commandLink is out of the question (it does a postback using javascript, it's not what you want);
Parameter are all in the param implicit object. You can insert them by a #ManagedProperty annotation, like this:
#ManagedProperty("#{param.ref}")
String ref
// .. getters, setters (obligatory!)
You can also use (if you are on JSF 2) the f:viewParam tag (a nice description http://blogs.oracle.com/rlubke/entry/jsf_2_0_bookmarability_view), you get the bonus of validation and conversion.
The way I understand it, your setup is rather complicated. Using a handwritten custom component for a menu is a huge overkill (at least judging from the provided description), a composite component would probably do. JSF has no special way of making ajax calls between views or embedding views one into another, so - unless you use iframes - your only choice would be to include all the possible pieces of content into a single view, wrapped in panels, and render them as required:
<h:panelGroup rendered='#{backingBean.ref == 2}'>
... content 2 ...
</h:panelGroup>
and so on. Careful, this would be heavy on resources.
You could also write your own ajax solution in javascript. This would require all the pieces of content to be fully independent views, with their own forms. Also, all their postbacks would have to go through ajax, so the main page does not get reloaded.
I am trying to use this plugin from JQuery, however how do I populate the options of the selection of the combo box? I am pretty new to JQuery so some help would be appreciated
So say I have a html code as follows:
<select name = "test">
<option>1</option>
<option>2</option>
</select>
what should I do to make it so I have the interface above?
Checkout the example on this page.
You still create an html select element with child options. Then you turn it into a jquery combobox with either a really simple $('#comboboxid').combobox(). If you want, I can help you with the more advanced options.
This jQuery plugin only enhances the look'n'feel of a HTML <select> element with customizeable CSS styles. It doesn't require any changes to standard HTML/JSP/whatever code you're using to populate the options. You can just write down the dropdown options the usual way in JSP as you would do without this jQuery plugin.
By the way, that plugin is pretty old and its name is fairly misleading. A combobox is in essence an editable dropdown. But this plugin does nothing about that at all. What's actually your functional requirement? Aren't you looking at the wrong plugin?
Update: as to how to use it, just include the required JS files in <head> and call $(selector).combobox() during document load. There's even a complete example here (note that you need to click the "click to view/hide" link to see the HTML).
i'm using struts (form) + validation
i just want to ask if can i set focus on some field on form after validation without javascript? i think i red something in book programming jakarta struts but i can't remember.
thanks
You cannot set focus on a certain field with pure HTML. The tabindex idea as suggested by Bozho is nice, but it will only work if you actually press tab for the first time. It has however the disadvantage that it changes the tabbing order of the input elements. Not really user friendly.
You'll really need to grab JavaScript for this. Just do something like:
window.onload = function() {
document.formname.${inputname}.focus();
// or:
document.getElementById(${inputid}).focus();
};
...where ${inputname} dynamically resolves to name of the input field as in <input name="foo"> and where ${inputid} resolves to ID of input field as in <input id="foo">.
That's all.
You can set the tabindex="1" attribute of the input which you want to have obtain the focus first, when the page reloads.
You can't set the focus on a field without using JavaScript. Others have tried and failed (CSS was the first place they looked at, but that doesn't cut it either).
Not sure what you've read in the book Jakarta Struts, but maybe you are referring to the focus attribute of the Struts <html:form> tag? That sets the focus on the desired form field without you needing to add JavaScript. But Struts will add the JavaScript, so that means no JavaScript from your side, and not no JavaScript at all.