如何用AJAX或JSF刷新部分页面？

Question

How to render part by part xhtml-page with Primefaces and Ajax (or without). Everything else is working, when the user press the checkbox, message is shown, but usernamecontent is never updated. How to refresh panelgrid in that case? I am totally newbie with AJAX, started today:)

<h:outputLabel value="Do you want to create username?" for="description" />
    <p:selectBooleanCheckbox value="#{testController.selectedNew.asUser}">  
    <p:ajax update="msg" listener="#{testController.selectedNew.addMessage()}"/>
    <p:ajax update="usernamecontent"/> ------> **This is not working!**
    </p:selectBooleanCheckbox>  

    <h:panelGrid columns="2" id="usernamecontent" rendered="#{testController.selected.asUser}">
    <h:outputLabel value="#{bundle.CreateUserLabel_userUsername}" for="username" />
    <p:inputText id="username" value="#{testController.selectedNew.userUsername.username}" title="#{bundle.CreateUsersTitle_username}" required="true" requiredMessage="#{bundle.CreateUserRequiredMessage_username}"/>

    <h:outputLabel value="#{bundle.CreateUsersLabel_password}" for="password" />
    <p:inputText id="password" value="#{testController.selectedNew.userUsername.password}" title="#{bundle.CreateUserTitle_password}" required="true" requiredMessage="#{bundle.CreateUserRequiredMessage_password}"/>
    </h:panelGrid>

Thanks Sami

Answer 1

Your usernamecontent component is by itself conditionally rendered in the server side. In order to be able to ajax-update components, you need to ensure that the component in question is always rendered, because it's in the end the JavaScript which needs to update it in the client side.

You need to wrap it in another component which is always rendered, so that JavaScript can always access it in order to update the content.

<h:panelGroup id="usernamecontent">
    <h:panelGrid columns="2" rendered="#{testController.selected.asUser}">
        ...
    </h:panelGrid>
</h:panelGroup>