I was browsing to find a solution for a long time, but I did not find a suitable answer.
I'm developing a JSF web appication using RichFaces library. Application supports different locales, and user is able to change them by selecting from dropdown list.
I want the items in dropdown list to have a flag icons along the locale name.
Unfortunately, I could not find the way to do it with JSF.
The xthml code for the dropdown list is:
<h:panelGroup>
<h:form id="languageForm" prependId="false">
<h:outputText value="#{usermsg['locale.select.message']}" styleClass="userMessage"/>
<h:selectOneMenu id="dropdown" value="#{localeBean.selectedLocale}" onchange="submit()">
<f:selectItems value="#{localeBean.locales}" />
</h:selectOneMenu>
</h:form>
</h:panelGroup>
Flag icons are simply done with plain HTML and JQuery, like I've found here: http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/
To put the icon in the dropdown list item, I have to apply the css for each element in list, like:
#en {
background-image: url(/resources/images/flags/gb.png);
}
#fr {
background-image: url(/resources/images/flags/fr.png);
}
The problems here are:
f:selectItems (as well as f:selectItem) does not seem to support style property.
I could apply styles to tags using javascript, but I need to have IDs for tags, which f:selectItem (seems) does not allow as well.
The other thing I thougt is to use JQuery control mentioned in the link above, but here is another problem: how to set the value of the selected option to JSF bean. In other words, can I set #{localeBean.selectedLocale} through JQuery or Javascript and plain HTML?
I have found that PrimeFaces has a selectOneMenu control, which allows adding icons http://www.primefaces.org/showcase/ui/selectOneMenu.jsf (the one named 'Content with Filter')
but I'm affraid we cannot afford to switch from RichFaces to PrimeFaces at the moment.
Any help is appreciated.
I have found a solution myself. I figured that I'm able to add ids or classes to html tags with jQuery, so what I've done, I've added the following script:
<script type="text/javascript">
$(document).ready(function() {
$('option').each(function(){
$(this).addClass(this.value);
});
});
</script>
And css:
option {
background-repeat: no-repeat;
background-position: right;
}
.en {
background-image: url(/resources/images/flags/gb.png);
}
.fr {
background-image: url(/resources/images/flags/fr.png);
}
...
I used classes because I have two menus with flags in my app, but this works with ids as well.
The script adds the class to JSF-generated tags, so there is no longer an issue to send value back to managedBean.
Thanks everyone.
Related
My Question:
Is there a way i can add an infobox to a label which was created by the form:checkboxes-Tag? It should appear while hovering over the label (I know that the title attribute in html does exactly this).
Scenario:
I have a div with generated checkboxes. Those checkboxes have labels which are longer than the max-width of the containing div. As i don't want the width to be increased i thought displaying the name while hovering over the label would suffice. But as far as is know the checkboxes-Tag does not support a title-tag per item (items are computed at runtime and passed to the model).
It looks like this:
<fieldset>
<div id="selectedAccounts" style="overflow-y:scroll;overflow-x:hidden;" onchange="loadSthElse()">
<form:checkboxes path="selectedAccounts" items="${accounts}" delimiter="</br>/>
</div>
</fieldset>
As items i pass a Map<Integer,String> to fill values and labels.
The Spring Documentation says that the standard html attribute title is still available. But i can't see if or how it is used for every single item that is created as you only seem to define one title.
I tried something like
$("#selectedAccounts label").each(function(element) {
element.attr('title', element.name)
}
but it wouldn't work either.
Is there a way to make this work - Javascript, Jquery - or is the checkboxes-Tag poorly chosen?
Greetings,
Uwe
If you don't want to use title attribute (¿WHY?), you can define hover event in any hidden object you want. It also gives your code and HTML structure more readability.
HTML
<form:input type="checkbox" value="CHECKBOX1" checked="checked">
<div>all the info you want to show when hovering your checkbox</div>
CSS
input+div{display:none;}
input:hover+div{display:inline;}
I fixed this issue.
I simply added a title using dojo after generating the checkboxes.
<div id = "selectedCampaigns" onchange="loadAdSets()">
<form:checkboxes path="selectedCampaigns" multiple="true" items="${campaigns}" delimiter="<br/>"/>
<script type="text/javascript">
dojo.query("#selectedCampaigns label").forEach(function(element) {
dojo.setAttr(element,"title",element.innerHTML);
});
</script>
</div>
After setting the attribute to the innerHTML everything looks just fine.
Our team built a custom portlet to load Google markers onto a map. The markers are created in the template script. We now would like to display these markers in another asset publisher in a list like format. Is there anyway to pass a conditional to the template file depending on the portlet that is requesting it? Or alternatively are there any good methods for building this code into the jsp rather than the template file?
//code that creates the markers on the full map
gmarker=new google.maps.Marker({position:new google.maps.LatLng("$Lattitude.getData()","$Longitude.getData()"),title:"$reserved-article-title.getData()",icon:gicon,map:map});
if(window.location.href.indexOf("fullmap") > -1) {
google.maps.event.addListener(gmarker, 'click', function() {
new google.maps.InfoWindow({content:
'<div id="node_content">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'
}).open(map,this);
});
}
gmarker.setMap(map);
//redirect code that opens the infowindow on load if the id paramater is not null
if(flag==true){new google.maps.InfoWindow({content:
'<div id="node_content" class="gs2">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'}).open(map,gmarker);
flag=false;
}
It is liferay 6.1 so we don't get to enjoy the luxuries of the latest release.
Here is a screen shot of the two portlets and what they are displaying as well as an example of what we are aiming for. A website that is very similar to what we are attempting can be found here. Were hoping for conceptual ideas on how to differentiate the portlets not code necessarily. Your help is very much appreciated.
If you want to use the same JavaScript function from diverse portlets, then the better way is to put the JavaScript function to the Theme
http://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en
and call the function from the portlet-jsp with different properties.
I am not sure if I understood your question correctly, but have you considered creating a custom Display Style for your asset publisher to achieve this? If not, check this out:
http://www.rotterdam-cs.com/blogs/-/blogs/hooking-the-asset-publisher-for-custom-display-styles
You can create a new display style with your Map on top and the list below, everything in one jsp (unless you break it down off-course). I think it will possibly resolve your problem.
I have Javscript in my XHTML file as
<script src="test1.js"></script>
Now I have couple of other javascripts as well. They are actually themes.
I want give users flexibility to change the them (javascript name) frmo drop-down box .
I tried this way
<script src="#{testBean.jsName}</script>
Since it is going to be an Ajax update so I have update the section and I updated with
<h:panelGrid id="jsName">
<script src="#{testBean.jsName}</script>
</h:panelGrid>
This is not inside the form .
when I try
<p:commandButton value="Generate"
actionListener="#{tBean.generateGraph}" update="jsName"></p:commandButton>
It doesn't work as it says that it couldn't find jsName.
I put that gride inside the form then it wont throw the error but the script name would still remain the same.
Does anyone have better idea or any other way to achieve it?
If you try to update it from a component inside the form you have to use the absolute id of the panelGrid otherwise primefaces will try to update something with id jsName inside the form. When you want to use the absolute id you have to preced a :. So try the following for the button:
<p:commandButton value="Generate" actionListener="#{tBean.generateGraph}" update=":jsName"/>
I have the following dialog inside my .xhtml page.
<p:dialog widgetVar="exampleDialog" onShow="fillTextArea()" >
<p:tabView id="tabView">
<p:tab id="exampleTab" title="Example">
<p:inputTextarea id="someInputTextArea" autoResize="false"
value="" />
</p:tab>
</p:tabView>
</p:dialog>
The dialog is shown when a button is clicked. The fillTextArea javascript function is defined inside script tags at the head of the document.
function fillTextArea() {
console.log(jQuery("textarea[id='someInputTextArea']")); // logs empty array []
console.log($("[id='someInputTextArea']")); // logs empty array []
jQuery("textarea[id='someInputTextArea']").val('xxx'); // does nothing
}
What's the problem? Why can't I retrieve the input text area?
Instead of using the onShow event of the Dialog, I tried:
exampleDialog.show();
fillTextArea();
just in case. But this didn't work neither. I'm trying to set the contents of the inputTextArea.
Any help appreciated. Thanks.
jQuery works on the JSF-generated HTML DOM tree, not on the JSF source code. JSF components do not necessarily generate the same client ID (the HTML element ID) as you have specified in the component ID. They may be prepended with IDs of the parent NamingContainer components. The <h:form> and <p:tabView> are such components.
Open the page in webbrowser, rightclick and View Source and locate the generated HTML code of the <p:inputTextarea>. It'll look something like this:
<textarea id="formId:tabViewId:textareaId">
You need to specify exactly this ID in the jQuery selector.
$("[id='formId:tabViewId:textareaId']");
See also:
How to refer to a JSF component Id in jquery?
How to select JSF components using jQuery?
On my JSF website, I've got a couple elements that I'd like to use to cause navigation to our old classic ASP site (no data needs survive, just simple navigation). What's the best way to do this?
Thoughts so far:
- Using the outcome/navigation rules implies that you're staying within the same site. Can it be used to navigate outside?
You can't use navigation cases for this. Use h:outputLink with a direct URL.
<h:outputLink value="http://google.com">Click</h:outputLink>
Or just plain vanilla HTML.
Click
Update:
A <h:commandButton> is also doable, but then you have to add a bean action method which does ExternalContext#redirect() to the desired URL.
public void submit() {
FacesContext.getCurrentInstance().getExternalContext().redirect("http://google.com");
}
An alternative is indeed to style the link to make it look like a button. Here's a kickoff example:
a.button {
display: inline-block;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
Use it as <h:outputLink styleClass="button"> or <a class="button">.