CODEWITHSUNDEEP
ajaxjsfrichfaces
slai
slai

Reputation: 11

How to rerender a div in template xhtml page

I have a problem with rendering a page with userdata.

There is a template .xhtml whitch looks like this:

<h:body>
    <div id="page">

        <div id="content">
            <ui:insert name="content">Content</ui:insert>
        </div>          
        <div id="right_area">
            <ui:insert name="right_area">
                <ui:include src="../../user/showUser.xhtml" />
            </ui:insert>
        </div>
    </div>
</h:body>

The showUser.xhtml shows some user data i would like to update

In the content div i have a form with a commandbutton to update the data

<h:commandButton type="submit"
id="update" 
action="#{Bean.updateData}"
reRender="right_area">
</h:commandButton>

After i clicked the button the database is updated but the "right_area" does not rerender. I also tried:

<h:commandButton type="submit"
id="update" 
action="#{Bean.updateData}">
<a4j:ajax execute="update" render="right_area"/>
</h:commandButton>

I get no error messages Any help pointing in the right direction appreciated!

Upvotes: 1

Views: 5041

Answers (1)

BalusC
BalusC

Reputation: 1108642

You need to use a fullworthy JSF component instead of a plain vanilla HTML element if you ever want to re-render it by JSF. You can use <h:panelGroup layout="block"> to render a <div>.

Also, your client ID is interpreted relative to the current naming container (which is <h:form> in your case). It is looking for a component with id="right_area" inside the context of the <h:form>, but it does not exist. You need to specify an absolute ID instead, starting with the default naming container separator character :, thus so render=":right_area".

Finally, the <h:commandButton> doesn't have a reRender attribute, you're confusing with old RichFaces 3.x's <a4j:commandButton>. You should be using <a4j:commandButton render>, or <f:ajax render> or <a4j:ajax render> instead.

So, summarized

<h:panelGroup id="right_area" layout="block">
    <ui:insert name="right_area">
        <ui:include src="../../user/showUser.xhtml" />
    </ui:insert>
</h:panelGroup>

and

<h:commandButton ...>
    <a4j:ajax execute="update" render=":right_area"/>
</h:commandButton>

should do.

Upvotes: 2

Related Questions