A jsf page contains a form with a commandButton element like <h:commandButton action="#{bean.search}". This submit button will trigger a bean, which then will send more data back to this same jsf page.
Question: after the submit, is the jsf page fully loaded again? or is just the part containing the newly retrieved data reload and other parts are not loaded again?
By default JSF will fully reload the page. This can be tested by looking at the browser network developer tools while submitting the commandButton. If you intend to only render a part of the page - e.g. a label that outputs the result - you can do that by using AJAX.
For example if your commandButton is in a form, by adding
<f:ajax execute="#form" render="#form:result" />
within your commandButton tag, you can specify that only the contents of the form are processed by the server and only the label with the ID 'result' is rendered.
For further information take a look at this guide for AJAX in JSF: https://www.beyondjava.net/a-comprehensive-guide-to-jsf-ajax
You will see that the author shows the full page loading without AJAX.
Alternatively here is the official documentation for <f:ajax>:
https://jakarta.ee/specifications/faces/2.3/vdldoc/f/ajax.html
Related
The page shows a Primefaces's overlayPanel when the target component (a commandButton) is clicked on:
<p:commandButton id="inputBtn" value="Choose a data source" type="button" action="#{dataImportBean.oAuth}"/>
<p:overlayPanel
id="overlaypanel1"
for="inputBtn"
dynamic="false"
widgetVar="inputChooser"
>
// contents of the overlay panel
</p:overlayPanel>
I would need the overlayPanel to be displayed when the page loads, without the need to click on the target commandButton.
The use case is: the user had the overlayPanel opened but an oAuth flow made the user navigate away from the page. When the oAuth is completed the user is redirected to the page. However the overlayPanel is closed when the page loads, whereas I need the user to be brought back directly to the overlayPanel, for consistency.
Use the client side API on your widget var. You can use show() to show the panel, so in your case: PF('inputChooser').show().
To do this on page load, you could place this after the p:overlayPanel:
<c:if test="#{yourCondition}">
<script>$(function() { PF('inputChooser').show() })</script>
</c:if>
See also:
https://primefaces.github.io/primefaces/10_0_0/#/components/overlaypanel?id=client-side-api
This question already has answers here:
h:commandButton/h:commandLink does not work on first click, works only on second click
(2 answers)
Closed 6 years ago.
What I'm trying to do is just a simple logout function. The main page will call a template page; consist of header and content. The header contains the logout button. There will be 2 forms in the page, one in the header (logout button), one in the content (few buttons,links, etc).
My problem is the page refresh when first click on the logout link and only proceed after second click. The problem starts to appear when I include primefaces or ajax code inside the content form. When I remove that particular code, the logout works as intended.
The logout form in main template templateUser.xhtml:
<h:form id="logout">
<h:commandLink action="#{tenantController.customLogout(e)}"
id="logoutBtn" immediate="true" value="Logout" />
</h:form>
The backing bean:
public String customLogout(ActionEvent e) {
return "login.xhtml";
}
FYI: the customLogout method also consist of session destroy, but I just put page redirect here.
In template client, the template is specified as:
<ui:composition template="/templateUser.xhtml">
As for the JSF library, currently use jsf 2.0
Solutions I've tried:
immediate="true"
put id for both form and commandLink (template form & content form)
use primefaces (<p:commandLink> with ajax false ==> this returb to the previous page; the method in backed bean is not running.
Below are few links I tried here:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
How can I prevent page refresh on click of <h:commandLInk>
JSF PrimeFaces p:commandLink won't redirect to new page?
The problem starts to appear when I include primefaces or ajax code inside the content form. When I remove that particular code, the logout works as intended.
Your problem is caused by point 7 as described in commandButton/commandLink/ajax action/listener method not invoked or input value not updated. When you fire an ajax request using <f:ajax> and performs an update which also covers all other forms, then all those other forms will lose their view state. This causes that the 1st submit will always "do nothing", but the next submits will work, which matches exactly your problem symptoms.
You can solve this problem in one of the following ways:
Explicitly specify the client ID of all other forms in the <f:ajax render>. You can specify multiple client IDs space separated. E.g.
<f:ajax ... render="someComponent otherComponent :loginForm" />
Use the JavaScript based fix as proposed in this answer: h:commandButton/h:commandLink does not work on first click, works only on second click.
I'm using JSF 1.2 and I was trying to add onclick tag to h:commandLink which is throwing runtime error.
The code I'm trying to write in jsp is:
<h:commandLink id="btn" styleClass="button" onclick="performAction();">
<h:outputText value="some value" />
</h:commandLink>
It is giving me an error:" Unable to locate tag attribute info for tag attribute onclick. "
Any help is appreciated.
Thank you.
From h:commandLink it says...
The commandLink tag renders an HTML "a" anchor element that acts like a form submit button when clicked.The commandLink tag is used to submit an action event to the application.
Use <h:commandLink> tag to represent a link to POST form data.
h:commandLink tag must include a nested outputText tag, which represents the text the user clicks to generate the event.
The generated HTML uses syntax.
The commandLink tag will render JavaScript. If you use this tag, make sure your browser is JavaScript-enabled.
The onclick attribute is automatically populated with Javascript to submit the form.
Setting type = “reset” makes the link a reset button.
Use the action attribute to associate the link with a JavaBean’s method.
You should check the source code via view source and check for java script errors via Firefox.
I am working on JSF. I have an xhtml page with multiple forms. when i am submitting one form, and if i had made some changes on other form i am loosing it, as on submit the page is getting refreshed. I cannot use a single form. is there any way to do.
any solution will be highly appreciated.
thanks !
If you're already using JSF 2.x (your statement that you're using XHTML (Facelets) confirms this less or more), just submit the form by ajax.
It's a matter of adding the following tag to the command links/buttons of the form:
<f:ajax execute="#form" render="#form" />
This way the current <h:form> will be submitted by ajax and the current <h:form> only will be rendered (updated/refreshed). You can if necessary specify other to-be-updated components in the render attribute by adding other client ID(s).
If you're still on the old JSF 1.x, you may want to look at Ajax4jsf sublibrary of RichFaces which supports basically the same.
I am trying to popup a window when someone clicks a button on the data table.
<h:commandButton
action="#{cacheController.popupDetails}"
immediate="false"
onclick="popup()"
value="View Details"
styleClass="submit">
</h:commandButton>
The associated popup function is
function popup() {
window.open('RDDetails.jsf','popupWindow', 'dependent=yes, menubar=no, toolbar=no, height=500, width=400');
}
Now in the new 'RDDetails.jsf" file, I am trying to access the same managedBean cacheController. But the problem is, the pop-up window and JSF lifecycle is not in sync. As a result, the popup first displays blank and when I refresh, it pulls out the proper data.
Is there anyway I can click on a button which will do some processing in the managed bean and then opens a pop up which rerieves the processed data from the managed bean.
I am using JSF 1.1.
You're here basically firing two independent requests: one associated with the form submit and other which opens the RDDetails.jsf in a popup. You'll need to combine this in one request. You can achieve this in basically two ways:
Get rid of the onclick and just add target="_blank" to the <h:form> so that it get submitted into a new window/tab.
Block the default action by adding return false; to the onclick and do the business logic in the constructor of the bean associated with RDDetails.jsf. The only (major) caveat is here that the model won't be updated with the form fields. Thus, you'll need to pass the form fields as request parameters of the popup URL manually with help of JavaScript. You can then make use of managed property entries in the faces-config.xml to inject the GET request parameters into the model.
First way is obviously the easiest, but this doesn't give you a "fullworthy" popup/modal dialog. The second way is a bit harder (unless you've already a good grasp on both JavaScript and JSF). I would then consider to look for a component library which provides a ready-to-use popup component.
See my example:
<h:commandLink action="#{controller.myAction}" onmousedown="document.forms['idform'].target='_blank';">
I'm using jsf 1.1