I am struggling to get the click event on h:panelgroup which will call a method in my managedbean. I don't want binding as it is only for property.
Also can someone explain the function of below line.
<f:ajax event="click" render="#all" listener="#{ABC.abc}" />
This is taking click listener on the whole page. I only need it to trigger when the input is clicked. So after this was not working I am trying to get a click on panelgroup. Is there any other way.
Thanks.
So figured it out why it was taking click on whole page. I was not wrapping f:ajax call in jsf component. So it was attacking to main h:panelgroup. Wrapped it around a new panelgroup and it started working fine.
But I am getting click twice on each call. :/
Related
I have a text box which takes a search value, and i want to send this string to the server side on click of a button. Not by a form submit, by an ajax call.
I had added an actionListener to the input tag itself, which is called on blur. But what i really want is for the user to click the button to trigger the search function.
I got an idea from this question, and implemented it this way:
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
<a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/>
</a4j:jsFunction>
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>
The value received at server side is of course, "mySearchText". How do i pass what the user enters? Or how do i bind #{createBookingForm.searchText} before the button's action listener is called?
Im open to any other approach to. I have limitations though : Im working on enhancing a legacy application, built using JSF 1.1. I cant upgrade, not without a fight at least!
Edit : I tried doing it this way, but i get "undefined" on the server side.
Why not use a4j:commandButton instead of h:commandButton? It will execute ajax request and render what you want. No form submit will happen. Loks like what you need.
h:commandButton by default submit the form when clicked. So no need to send specially using a4j:jsFunction or in any other way. You can completely remove your js function unless if you have something else to do. If you want to test that add an action method and print the value of searchText variale in createBookingForm bean.
Hope this helps!!
This is the whole solution
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:commandButton reRender="searchResult" actionListener="#{createBookingForm.searchMaterials}">
<a4j:actionparam name="param1" noEscape="true" value="document.getElementById('likeMaterial').value" assignTo="#{createBookingForm.searchText}" />
</a4j:commandButton>
I wanted to ask just what title says:
say we have a inputtext and a button. Well, I wanted to submit an ajax request in the inputtext when button is clicked.
for example, from the inputtext perspective, I want to achive something like this:
<h:inputtext>
<a4j:support event="button.onclick"/>
<h:inputtext>
<h:button id="button">
or, from the button perspective:
<h:inputtext id="input"/>
<h:button id="button">
<a4j:support event="onclick" action="input.submit"/>
</h:button>
Don't know if there exist an easy way to get this done.
thanks in advance!!
If you just want a simple form submit, I think both approach are wrong, as long as you put your inputtext and button properly in a form, the form will automatically submit whatever you have in this form including user's input in inputtext when you click the button. There is no need to do something like input.submit yourself. (and it's not correct, either)
For the following case, you will see the setInputValue() of managed bean being invoked when you click your button.
<h:inputtext id="input" value=#{bean.inputValue}/>
public void setInputValue(String inputValue){
this.inputValue = inputValue;
}
Try using
Richfaces Region component to limit your request to diffrent regions.
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_region.html
I finally get this done by means of <a4j:jsFunction>
a4j:jsFunction
I have the following in a JSF page:
<h:commandLink action="#{manager.removeEntity(row.id)}" value="Remove">
<f:ajax event="action" render=":form:table" />
</h:commandLink>
The rendering works perfectly, though it renders the component before the action is performed. (I know this through logging)
Is there any way for me to render the components after the action function is performed on the server?
Any help will be greatly appreciated
Update 1
I removed the action attribute and added a listener to the tag, though unfortunately it doesn't seem to help, the method is still called after the component tree is rendered.
<h:commandLink action="#{manager.removeEntity(row.id)}" value="Remove">
<f:ajax event="action" render=":form:table" />
</h:commandLink>
The rendering works perfectly, though it renders the component before the action is performed. (I know this through logging)
This is not true. You must be misinterpreting the logging. Perhaps you have put a log statement inside the getter method of the table's value in a misassumption that it's only called during render response. This is thus not true. The getter is called as many times as an EL expression referencing the property is been evaluated. This can happen in a different phase before and after invoke action phase. As you've the command link inside a datatable, the table's value getter method will also be called during apply request values phase in order to find find the row associated with the link.
Pass FacesContext#getCurrentPhaseId() along with the log to learn during which phase the getter method is been called. Also note that doing business job (like calling database and so on) inside a managed bean getter method is a bad idea.
See also:
Why JSF calls getters multiple times
You can use the listener of the f:ajax to execute your logic and pass the row.id with one of the following ways (remove the action="#{manager.removeEntity(row.id)}")
Pass a parameter on ajax call 1
Pass a parameter on ajax call 1
kinda late but i had the same problem.
The ajax renders before my jsf logic completed. My solution? Well i added a confirmation dialog. I know it's not a technical solution but hey, it works. Once the user presses ok on the dialog(which takes about a sec, in this time the logic should be done) the component should be rendered. Good Luck Hope this helps.
Before changes:
<h:commandButton action="#{bean.buisnessLogic(param1, param2)}">
<f:ajax
execute="components"
render="table"
/>
</h:commandButton>
After Changes:
<h:commandButton onclick="javascriptCofirm();" action="#{bean.buisnessLogic(param1, param2)}">
<f:ajax
execute="components"
/>
</h:commandButton>
<h:commandButton id="button" style="display: none">
<f:ajax
render="table"
/>
</h:commandButton>
javascript:
function javascriptConfirm() {
bootbox.alert("Se agrego la accion con exito.", function () {
var boton = document.getElementById("button");
boton.click();
});
e.preventdefault();
return false;
}
What i did:
Ok so before changes were made. My commandButton would render the table before the registers were added. For example i would add row 2 and it would not show changes until the page was refreshed or row 3 was added. I did some research and my conclusion is that jsf translate the ajax tag to javascript, and javascript directly executes the code without waiting for the the action to finish.
Solution:
So now i remove the render attribute from ajax and i create another commandButton and in the new commandButton i add the render. The javascriptConfirm method calls the button and "clicks it". This renders the page, but by the time they confirm the buisness logic is complete. So yeah. This is probably confusing. Well whatever you just comment and i will try to respond as quickly as possible (probably not that quick).
I am trying to get a simple full layout to work with a navigation on the left side.
That works but I want to reload the center (content) via ajax on menu item selection.
The reason is, that I have a MP3 player on the right side and if the whole page reloads the mp3 player
start the playback again.
On Richfaces I did that with a session bean which holds the actual filename that needs to be rendered in the center
and on menu click the action method analyses the menu entry ID and sets the filename to its corresponding.
Actually that works a little bit for primefaces as well, but the content doesn't render correctly. After punshing F5
it is perfect.
Does anybody can give me a real simple example how I can do that?
Many greetings,
Hauke
I have never use menuitem but with commandButton I just use 'update' notation to refresh the form located in the center content via ajax.
On navigation layoutUnit
<p:commandButton
value="Enter"
image="ui-icon ui-icon-comment"
update="form_input_console form_output_console:tabbed_contents"
actionListener="#{dashboardUi.processCommand}" />
and on the center layout unit
<p:layoutUnit position="center">
<h:form id="form_output_console">
<p:tabView
id="tabbed_contents"
dynamic="true">
I want to update a part of a page by PPR.
This is the part of page that i want to update:
<h:panelGroup id="aggiungiAuto"
rendered="#{!autoBean.operazioneOk}">
<ui:include src="../component/aggiungi_auto.xhtml"/>
</h:panelGroup>
While this is the commandButton present in aggiungi_auto.xhtml
<p:commandButton value="Submit"
update="growl aggiungiAuto aggiungiFoto"
actionListener="#{autoBean.insert}"/>
Any Idea?
JS/Ajax works on the client side, not on the server side. JSF works on the server side, not on the client side. When you instruct JSF to not render the component to HTML, then nothing will be present in the client side, so JS/Ajax will be unable to locate the HTML element to refresh/update.
You need to wrap it in another <h:panelGroup>.
<h:panelGroup id="aggiungiAuto">
<h:panelGroup rendered="#{!autoBean.operazioneOk}">
<ui:include src="../component/aggiungi_auto.xhtml"/>
</h:panelGroup>
</h:panelGroup>
This way the <span id="aggiuniAuto"> is always present in the client side, so JS/Ajax will be able to update it with the new HTML data generated by JSF.
So I was having this kind of a problem with PrimeFaces (the above answer not being sufficient this time), and I also discovered a solution.
Part of the problem I think was that I was using ui:include recursively. For whatever reason, PrimeFaces was irrationally causing UI components to be bound to the backend data out-of-sync; e.g., when an "Add" button was clicked, a new value would be created in the UI, but then the data for it would be ripped out of the values for the section below, etc...
The explanation? "[O]n a viewscoped bean, a hidden field is added to the form to hold post-back data[;] if that field is not included with the process, then the bean will lose context." This particular problem is prevalent with ui:include recursion especially. Solution (all regarding the p:commandButton or other actionable component):
Ensure that update and process are pointing to a JSF component, not a regular HTML component.
update the next scope up if it breaks (goes out-of-sync with the binding).
Use styleClass's for update (not e.g. PF ID's or #this:#parent kind of stuff), so that jQuery is utilized instead of PF, e.g.: #(.fieldset-class).
process whatever scope is being updated. (This is needed for the post-back data so that the Bean keeps its context for the update...) process="#this" is not needed here, provided that the button is contained by the process value component.
For all buttons without validation wanted, set immediate="true".
If none of the above works (which happened with the Add buttons, probably due to ui:include recursion), set process="#this", immediate="true", and update="#none", and then oncomplete="remoteCommandName();", and have a p:remoteCommand instead with that name with the process, immediate, and update mentioned in the above points.
If none of the above works (which happened with some other buttons, probably due to being yet another layer deeper in the ui:include recursion)... wrap a h:panelGroup around the next c:forEach up and then update the PrimeFaces ID of that in the button itself while keeping its remoteCommand call afterwards, as specified above.
If none of the above works (which happened yet again to me)... Try the following code:
In the p:commandButton(s): oncomplete="$('.FixButtonSC').click();"
In the p:fieldset with a style class of FieldsetSC:
<!-- Fix (hidden) button. -->
<p:commandButton id="FixButton" styleClass="FixButtonSC"
process="#this" update="#(.FieldsetSC)" style="display: none;" />
Hope that helps...