CODEWITHSUNDEEP
ajaxjqueryjsf-2
jjross
jjross

Reputation: 678

How to inject one JSF2 page into another with jQuery's AJAX

I'm using jQuery's .load function to load one JSF page into another.

This works really well until the loaded JSF page uses some AJAX functionality. When this happens, the parent JSF page's AJAX stops working. In fact, after the two pages are combined whichever page has its AJAX called next is the one that continues to work. The other page stops working. If I use the parent page first, the child breaks. If I use the child first, the parent breaks.

Am I doing something wrong? I'm guessing JSF isn't designed for this sort of behaviour and that's fine but then how do I go about doing what I want?

Basically, we have a report page. When the user clicks the link to a report we would like the report to load dynamically into the existing page. That way, the user doesn't experience a page refresh. It's a pretty slick behaviour BUT obviously isn't ideal due to the pages breaking.

I suppose I could do this with a page that contains every report in an outputpanel and then determine which one is rendered based on a value in the backing bean but I can see lots of occasions where I'd like to be able to "inject" one page into another (for dynamic dialogs for instance) and it would suck to have to keep everything in one giant template.

Has anyone else come across this sort of problem? How did you solve it?

Upvotes: 3

Views: 592

Answers (1)

BalusC
BalusC

Reputation: 1109132

Do not use jQuery.load(). It does not take JSF view state into account at all, so all forms will fail to work. Rather make use of <f:ajax> and rendered attribute instead. Here's a basic example:

<h:form id="list">
    <h:dataTable value="#{bean.reports}" var="report">
        <h:column>#{report.name}</h:column>
        <h:column>
            <h:commandLink value="Edit" action="#{bean.edit(report)}">
                <f:ajax render=":edit" />
            </h:commandLink>
        </h:column>
    </h:dataTable>
</h:form>

<h:form id="edit">
    <h:panelGrid columns="3" rendered="#{not empty bean.report}">
        <h:outputLabel for="name" value="Name" />
        <h:inputText id="name" value="#{bean.report.name}" required="true" />
        <h:message for="name" />

        ...

        <h:panelGroup />
        <h:commandButton value="save" action="#{bean.save}" />
        <h:messages globalOnly="true" layout="table" />
    </h:panelGrid>
</h:form>

You can if necessary split off the content into an <ui:include>.

Upvotes: 3

Related Questions