CODEWITHSUNDEEP
ajaxjsfprimefaces
GolfAddict
GolfAddict

Reputation: 183

Ajax not rendering

I've seen similar questions but haven found the answer... Platform is JSF 2.2.6, Primefaces, Derby DB with Eclipse

I have two instances where I am toggling one item to affect another and ajax to provide an update. They seem the same to me other than one update is within the form and the other outside. "item" refers to a derby entity that uses Boolean rather than boolean which is why the test is ==true. Here is XHTML part:

    <p:growl id="msg"/>

    <h:form>
        <h:outputLabel value="Team event? " />
        <p:selectBooleanButton  value="#{events.item.teamEvent}" onLabel="Yes" offLabel="No">
            <p:ajax update="teamSize" listener="#{events.changeTeamEvent()}"/>
        </p:selectBooleanButton> 

        <h:outputLabel for="teamSize" id="teamSizeLabel"  rendered="#{events.item.teamEvent==true}" value="Team size: "/>
        <p:inputText id="teamSize" rendered="#{events.item.teamEvent==true}" value="#{events.item.teamSize}" 
                     validatorMessage="Team size must be between 2 and 4">
            <f:validateLongRange minimum="2" maximum="4" />
        </p:inputText>

        <br/>
        <h:outputLabel value="Allow signup? " />
        <p:selectBooleanButton value="#{events.item.allowSignup}" onLabel="Yes" offLabel="No">  
            <p:ajax update=":msg" listener="#{events.changeSignup()}"/>  
        </p:selectBooleanButton> 
    </h:form>

The backing bean is session scoped and with a debugger I have proven the properties are updated, the listener gets called. Neither changes the properties. After the listener finishes all appropriate sets and gets in the entity file are also called during render phase but only the second p:selectBooleanButton in my example renders correctly. The other changes the button but the Team size info never changes. It does present correctly when I refresh my my browser (up-to-date Chrome). My suspicion was that my rendered test was wrong but the refresh should work in that case. I've also tried many variations on the update attribute "teamSize", ":teamSize", "teamSize teamSizeLabel". I want the last example but have tried to show a simple example.

I assume it is simple but I can't see it.

Upvotes: 0

Views: 932

Answers (1)

VeenarM
VeenarM

Reputation: 1263

Your issue is that you're trying to update an item that is dependent on being rendered. It doesn't exist in the DOM yet potentially.

Your rendered items need to be wrapped with an always updatable div. see below

<h:panelGroup layout="block" id="dataUpdate">
       <h:outputLabel for="teamSize" id="teamSizeLabel"  rendered="#{events.item.teamEvent==true}" value="Team size: "/>
        <p:inputText id="teamSize" rendered="#{events.item.teamEvent==true}" value="#{events.item.teamSize}" validatorMessage="Team size must be between 2 and 4">
            <f:validateLongRange minimum="2" maximum="4" />
        </p:inputText>
</h:panelGroup>

Then in your first boolean box set it to update 'dataUpdate' instead.

Alternatively you could just do @form as it's a tiny form

Upvotes: 2

Related Questions