I want to make a webpage that is working on ajax(everything ajax). I mean.. whenever you click a link(I refer to < h:outputLink ...> ) to change a certain div using data from another link.

For example:

<h:outputLink value="/page.jsf" onclick="myfunction(this); return false;">
    My page
</h:outputLink>

page.jsf is a normal jsf page... displayed using a page layout.xhtml like:

<ui:position template="/layout.xhtml">
    <ui:define name="main">
         //my content here
    </ui:define>
</ui:position>

Is this possible? Is this possible, using a servlet to take only fragments from a specific jsf?

My last solution is to use jquery.load function...

Regards

I want to make a webpage that is working on ajax(everything ajax). I mean.. whenever you click a link(I refer to < h:outputLink ...> ) to change a certain div using data from another link.

For example:

<h:outputLink value="/page.jsf" onclick="myfunction(this); return false;">
    My page
</h:outputLink>

page.jsf is a normal jsf page... displayed using a page layout.xhtml like:

<ui:position template="/layout.xhtml">
    <ui:define name="main">
         //my content here
    </ui:define>
</ui:position>

Is this possible? Is this possible, using a servlet to take only fragments from a specific jsf?

My last solution is to use jquery.load function...

Regards

• java
• javascript
• ajax
• jakarta-ee
• jsf-2

Share Improve this question Follow edited Oct 12, 2011 at 10:56 Alex asked Oct 12, 2011 at 9:14 AlexAlex 2,14633 gold badges2525 silver badges4848 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

<h:link> and <h:outputLink> cannot be ajaxified. All JSF2 ajax requests are per specification POST requests. You need a <h:form> with a <h:mandLink>.

You could use the following construct:

<h:form>
    <f:ajax render=":include">
        <h:mandLink value="Home" action="#{menuManager.setPage('home')}" /><br />
        <h:mandLink value="FAQ" action="#{menuManager.setPage('faq')}" /><br />
        <h:mandLink value="Contact" action="#{menuManager.setPage('contact')}" /><br />
    </f:ajax>
</h:form>
<h:panelGroup id="include">
    <ui:include src="#{menuManager.page}.xhtml" />
</h:panelGroup>