How to avoid page flicker in JSF 1.1 + Ajax4jsf? - jsf

I am developing a small application usng JSF 1.1, Ajax4jsf and Tiles. When I click the a4j:commandLink, the entire page is reloaded. I want to update only portion of the page. How to resolve that?

<a4j:commandLink value="Get greeting" reRender="greeting" />
You must to use the property reRender to update some section of your page.
For more information, see this link.

Related

Is loading triggered from the click of a submit button generated by h:commandButton a full load?

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

primefaces- graphic image not direct an url

I use primefaces 3.1, in menubar i want to add icon .When user click the icon,it will be direct to the home.jsf page.Below,when user click the icon,page goes to index but its url seems different.Thanks for any helps.
<p:menuitem >
<p:commandLink action="home.jsf" >
<p:graphicImage height="24"
width="24"
value="resources/images/home.ico"
style="border:none" />
<p:commandLink>
</p:menuitem>
Upon submitting of <h:form> by any command components like <h/p:commandButton>, or <h/p:commandLink> JSF performs a forward and not a redirect. That is why your URL stays the same. Just append ?faces-redirect=true to your action attribute and it'll work as expected. For the distinction visit BalusC's answers to What is the difference between redirect and navigation/forward and when to use what? and How to navigate in JSF? How to make URL reflect current page (and not previous one).
That said, it's a poor practice to perform navigation by using command components. Use <h:link> or <h/p:button> components instead. They trigger a get request to the navigation case outcome, thus, your URL will change. Command components are designed to trigger server actions and not performing plain navigation. For more information consult BalusC's answer to When should I use h:outputLink instead of h:commandLink?.

How to retain form data in a multi form page

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.

JSF 2.0 and Primefaces integration for ajax update of center section

I have left, right and center panels in my xhtml page. Left panel contains menu item links and want to use them to refresh the center section through ajax.
I have seen quite a few links related to this but I am not sure on the final solution.
If this is not the preferred approach, please do guide on the same.
I am using managed beans which are sessionscoped and xhtml file uses following to do the dynamic call.
<p:menuitem value="Done" action="#{navBean.setPageName('done')}" update="centerPanel" immediate="TRUE" />
When I use primefaces 2.2.1, i am able to update the center panel on second click only from the menu in left panel.
When I use primefaces 3, the center section doesn't get updated.
The managed bean setter does get invoked in both cases.
Is it something to do with primefaces configuration or am I missing something?

How to Refresh only components in certain 'box'

Say I have a websites with 3 panel grid (just for example..) and I would like to have buttons inside each grid that only cause the contents of that grid to refresh so the rest of the page doesn't necessarily have to refresh.
How do I do that?
I tried to have a form sorround that grid but it seems like the rest of the page still gets refreshed.
A Note - I'm trying to achieve something like what happens when you work with a picklist. when you move the objects between the lists there doesn't seem to be any page refresh...
Thanks!
If you are using RichFaces, you should definitivly check the Ajax chapter of the RichFaces manual. I think you will find everything you need to know there.
Here a small example for partial page rendering:
<a4j:commandButton value="update" reRender="infoBlock"/>
<h:panelGrid id="infoBlock">
<!-- Some content-->
</h:panelGrid>

Resources