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"/>
Related
My application is managing software, and for user convenience, I want to allow them to open multiple tabs for changing parameters of more than one record at a time. But after finishing whatever they doing, the tabs stays open, and I got some complains about that. So basically my question is:
If there's any way to close browser tab that sends a request to method in my backing bean? for example:
JSF page:
<h:commandButton value="Public score"
action="#{assignmentBean.publicSelected()}">
</h:commandButton>
Bean method:
public void publicSelected() {
application.setAssignmentStatus(done);
dataAccess.mergeEntity(application);
}
is there any way to add something after merging command and close browser tab that activated method? Thanks for help
FULL CODE FOR SOLUTION I'm bad with mixing JS and JSF, so for any of you that are also bad at this I post full code solution using Tiago Vieira Dos Santos hint.
Now my button code looks like:
<h:commandButton value="Public score"
action="#{myBean.doThings}">
<f:ajax execute="#this" onevent="pop"/>
</h:commandButton>
plus on bottom of page I added code as follows:
<script type="text/javascript">
function pop(data){
if(data.status == "success"){
window.close();
}
}
</script>
now after method does what has to be done the window closes.
I think you can be use the javascript command Window.close() then you can put it on oncomplete tag or call in you managed bean using the FacesContext.
See more in this How to close current tab in a browser window?
Using an OutputLink and Javascript
<h:outputLink onclick="window.open('popup.faces', 'popupWindowName', 'dependent=yes, menubar=no, toolbar=no'); return false;" value="#">
<h:outputText value="open popup" />
</h:outputLink>
With this solution we got control over the appearance of the new browser window. And since there is no postback, there is no validation at all. This is the easiest way to open a new browser window when no model update is needed and no action has to be executed.
In order to implement a proper action handling we need to move the decision whether to open a new window to the action listener.
<h:commandLink actionListener="#{bean.openPopupClicked}" value="open popup" />
public void openPopupClicked(ActionEvent event) {
// code to open a new browser window goes here
}
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.
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?
I want to render using Richfaces a context menu on left click on a link-appearing text (blue text, and underline and cursor onmouseover). So, imagine a link which when clicked shows a context menu. Note that I don't care if the text is indeed a link, I just want it to appear as a link. So, even normal text would be fine, I would make it appear as a link using CSS.
I have the following conditions:
The context menu must appear on client side, without making a request.
The context menu must appear using a rich:componentControl (these "links") are inside a datatable, so the same rich:contextMenu must be re-used.
I still have not found a satisfactory solution, as each approach I have tried has caused a problem for me:
If I use h:outputText (that would be ideal), I cannot attach on it a rich:componentControl (I guess because it cannot fire an onclick event).
If I use a4j:commandLink, although I can attach a rich:componentControl, it makes a server request. I tried to add onclick="return false;" to prevent the request, but Richfaces adds the JS generated by the rich:componentControl after whatever is inside the onclick, which causes this code not to be reached at all, and of course the context menu not to appear at all.
Is there any way to do this? Please remember, no request!
You may try
<rich:componentControl disableDefault="true" ...>
According to documentation with this param componentControl should add return false; itself.
But be aware of corresponding bug: RF-5607
In case documentation lies you may use html anchors. This answer shows how to create a link with componentControl and without page refresh:
<h:outputLink value="#" id="link" onclick="return false;">
<h:outputText value="Link text"/>
<rich:componentControl attachTo="link" for="panel" operation="show" event="onclick"/>
</h:outputLink>
The onclick="return false;" prevents the anchor from scrolling the page to the clicked link.
I am writing an app using JSF 2.0.
For one of the page, there is a section of the page that takes a long time to display.
To improve the user experience, I am thinking to load the page first and then automatically do an Ajax call back to the JSF manage bean object once the page is loaded successfully after 1st load.
I am thinking to use f:event with type postAddView.
<h:outputText id="dummyId">
<f:event type="postAddToView" listener="#{mngBean.doSomething}" />
</h:outputText>
However it seems like f:event postAddToView is still being processed before the page is displayed for the first time.
The other options that I have explore is to create a hidden button and get javascript to trigger it. It works however I am just wondering if there is a nice JSF component/event that can do this instead of using java script.
Thanks for your help.
<h:commandButton id="dmyButton"
value="#{mngBean.getSomething}"
actionListener="#{mngBean.doSomething}"
style="display: none"
type="submit">
Java Script
<script language="JavaScript">
$(document).ready(function() {
if (document.getElementById('form:dmyButton').value == 'true') {
document.getElementById('form:dmyButton').click();
}
});
</script>
Thanks for all your help in advance
I think the PreRenderViewEvent is what you want.
http://javaserverfaces.java.net/nonav/docs/2.0/javadocs/javax/faces/event/PreRenderViewEvent.html
Though the docs don't show it, the preRenderViewEvent does work with f:event. I'll fix the docs presently.
PostAddToViewEvent is processed "During Restore View Phase, after a
component has been added to a view." (according to Java Server Faces 2.0 - The Complete Reference) which means it is really early in the lifecycle (Restore View is the first lifecycle phase).
I don't think that any PhaseListener will help you in this case, since they all run on the server side, not on the client side.
However, <f:ajax> can be applied to <h:body>, with event="load". I tried it, but it didn't really work, <f:ajax> wrapping <h:body> nothing happened, the other way around I got Unable to attach <f:ajax> to non-ClientBehaviorHolder parent error.