I have the requirement that on mouse over of a <p:graphicImage> a JSF backing bean method should be called which will display some data dynamically.
How can I achieve this? Please don't suggest me JavaScript code.
This link shows that <h:graphicImage> supports the mouseover event. Since you are using Primefaces, you should be able to do something like
<h:graphicImage ...>
<p:ajax event="mouseover" actionListener="myMethod"/>
</h:graphicImage>
Related
<p:selectBooleanCheckbox value="#{dropdownView.value}">
<p:ajax update="msgs" listener="#{dropdownView.add}" />
</p:selectBooleanCheckbox>
In primefaces I am able to call bean method to perform action on click of checkbox with the above code.
But I am unable to call bean method to perform action on click of selectBooleanCheckbox in Bootsfaces.
Can anyone please help regarding how to successfully call a bean method which displays message true or false onclick of selectBooleancheckbox in Bootsfaces.
I have tried this, but it's not working:
<b:selectBooleanCheckbox value="#{dropdownView.value}"
update="msgs" onchange="ajax:ajaxBean.add()" />
I am new to bootsfaces. Any help would be appreciated.Thank you
The BootsFaces showcase has an example how to use AJAX with checkboxes. Our example uses onclick instead of onchange. Other than that, everything seems to be identical. I didn't check that yet, but it's possible b:checkbox doesn't support onchange (although I don't see why not - we've implemented both events).
By the way, the other approach using f:ajax / p:ajax and a listener should work, too. But we've added this feature later, so we don't guarantee that the traditional JSF style of AJAX always works with BootsFaces.
I am having a problem with my JSF project, where I am using PrimeFaces Mobile. This page has several pm:views
I have a list of radio buttons, which looks like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter"
onchange="submit()"
valueChangeListener="#{bean.elementChanged}">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
</p:selectOneRadio>
My valueChangeListener looks like this:
public void elementChanged(ValueChangeEvent e) {
currentElement = (Element) e.getNewValue();
System.out.println(getCurrentElement().getElementName());
}
The problem is, whenever I click on a radio button element, my page completely reloads to the start view, which has to do with the onchange="submit()". I have also tried f:ajax elements, but this doesn't seems to be working with my radio buttons, because I can't click them when I use this.
Is there a possiblty to just submit my current form or pm:view (without the f:ajax)?
PS: I have also tried exactly this on a single PrimeFaces Mobile page, which completely worked, since the application just consisted of one page.
When using PrimeFaces components, you should be using <p:ajax> instead of <f:ajax>. Just get rid of the onchange="submit()". This indeed invokes a synchronous (non-ajax) form submit which totally explains the page reload. You also need to replace valueChangeListener by <p:ajax listener>. The valueChangeListener is the wrong tool for the job whereby you're merely interested in invoking a JSF action method when the newly selected value is being set.
All in all, the rewrite should look like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
<p:ajax listener="#{bean.elementChanged}" />
</p:selectOneRadio>
Don't forget to remove the ValueChangeEvent argument from the elementChanged() method. In order to access the selected value, just access the currentElement property directly.
See also:
When to use valueChangeListener or f:ajax listener?
I currently have a giant ui:repeat. Within this ui:repeat, some of the repeated objects have a url to a popup image associated with them. When someone clicks display under that particular object, I need the url to popup in a p:dialog.
<ui:repeat var="thing" value="#{bean.thingList}">
<p:commandLink value="details" onclick="miniImage.show();"
update=":#{p:component('chart')}"
action="#{bean.setCurrentImg(thing.imageUrl)}"
rendered="#{thing.includeImage}">
</p:commandLink>
</ui:repeat>
and at the bottom of the page:
<p:dialog id="chart" widgetVar="miniImage" >
<h:graphicImage value="#{bean.currentImg}"/>
</p:dialog>
And in the backing bean I tried using a simple setter and getter for currentImg.
I am a bit confused on this now and would like to accomplish this without having to submit the entire form as well. Any help is greatly appreciated.
If you're using PrimeFaces 3.3 or newer, you could just add partialSubmit="true" to the command component. You can then control the to-be-processed components in process attribute. In this particular case, just the current component (the command component itself) is sufficient, thus so process="#this":
<p:commandLink ... process="#this" partialSubmit="true" />
This way only the request parameters which are really necessary for the process will be sent.
Unrelated to the concrete problem, I suggest to use oncomplete instead of onclick to open the dialog. Otherwise the dialog is opened before update takes place and may cause poor user experience as the enduser would see the image instantly changing.
Hi I have a graphicalImage and I want a method in the backingBean to be fired up on clicking on the image.Below is the code snippet that i am using but it is not working. Please help.
<h:graphicImage value="../resources/images/delete_button.png"
onclick="editBean.deleteStudyPlan"
style="float:center;height: 18px; width:20px;"
title="Delete the studyplan"/>
You need to wrap it in a <h:commandLink> or <p:commandLink> and specify the action there.
<h:commandLink action="#{editBean.deleteStudyPlan}">
<h:graphicImage ... />
</h:commandLink>
Alternatively, you can just specify the image as a CSS background image of the command link or button.
The onclick surely isn't a method expression to a JSF backing bean action method. It's a JavaScript function handler. JavaScript is an entirely different language which runs in the webbrowser, working on the HTML code produced by JSF.
I writed an ajax request for any data. But the data don't work with h:inputHidden.
I think it's a bug of Primefaces.
But I don't know how to get the data now.
code:
<h:inputHidden id="buttonData" value="#{buttonDataBean.buttonData}" />
...
<p:commandButton id="getData" action="#{buttonAction.getButtonData}" update="buttonData" />
When I click the commandButton, the value of don't work.
But if I use the h:outputText, it worked.
My requirement:
Before click the commandButton, I have create any html buttons dynamically. I want to click the commandButton and update the name and position of html buttons. So that I must get any data and update the html buttons with Javascript.
how could I do about it?
If I want to use the JavaScript to get the ajax data, how to do it. I see the document and find two method: jsf.ajax.request() and Primefaces.ajax.AjaxRequest(). But I don't know how to use the two method. for example: Primefaces.ajax.AjaxRequest("test.xhtml",,). The "test.xhtml" how to request the method testMethod of TestAction?
use firebug to inspect html code. you can see new value
<h:form id="form">
<h:inputHidden id="buttonData" value="#{buttonDataBean.buttonData}" />
<p:commandButton id="getData" value="button"
action="#{buttonDataBean.buttonAction}" update="buttonData" />
</h:form>
If your problem does not get solved with primefaces ajax, you can use the native ajax provided by jsf have a look at it.It works, i have done many such things with it.
Instead of using a hidden input you could take advantage of JSF and use a f:param or f:attribute.
Read this really fine article, under the brand of BalusC: http://balusc.blogspot.com/2006/06/communication-in-jsf.html .