Question

This is the relevant part of my code (I am trying to add a timetable component to my school’s portal):

<h:panelGroup layout="block" id="sc-timetable-slots" styleClass="traverse ui-helper-clearfix">
                    <h:form id="sc-timetable-slots-table" styleClass="sc-left-bulk ui-widget-content">
                        <div class="sc-8-column">
                            <h:panelGroup layout="block" styleClass="sc-hours">
                                <ul>
                                    <li class="ui-widget-header"><h:outputText value="H" /></li>
                                    <c:forEach begin="4" end="24" var="h">
                                        <li>#{h}:00</li>
                                    </c:forEach> 
                                </ul>
                            </h:panelGroup>
                        </div>
                        <ui:repeat value="#{timetableSlot.dow}" var="dow" varStatus="ix">
                            <div class="sc-8-column">
                                <h:panelGroup layout="block" styleClass="sc-timetable-slots">
                                    <ul>
                                        <li class="ui-widget-header"><h:outputText value="#{msg[dow]}"/></li>
                                        <ui:repeat value="#{timetableSlot.getSlots(login.person,ix.index)}" var="slot">
                                            <li class="sc-timetable-item">
                                                <h:commandLink action="#{timetableSlot.edit(slot)}" value="#{slot.timeStart} : #{slot.timeEnd}" styleClass="sc-button incomplete">
                                                    <f:ajax render=":sc-timetable-slots" onevent="reRender"/>
                                                </h:commandLink>
                                            </li>
                                        </ui:repeat>
                                        <li>
                                            <h:commandLink action="#{timetableSlot.edit(login.person,ix.index)}" value="#{msg['timetable.slots.new']}" styleClass="sc-button incomplete">
                                                <f:ajax render=":sc-timetable-slots" onevent="reRender"/>
                                            </h:commandLink>
                                        </li>
                                    </ul>
                                </h:panelGroup>
                            </div>
                        </ui:repeat>
                    </h:form>
                    <h:form id="sc-timetable-slots-edit" styleClass="sc-right-detail ui-widget-content" rendered="#{not empty timetableSlot.edited}">
                        <span class="traverse ui-widget-header">#{msg['timetable.slots.edit']}</span> 
                        <h:panelGrid styleClass="traverse" columns="2">
                            <h:outputLabel for="timeStart" value="#{msg['timetable.slots.start']}"/>
                            <h:inputText id="timeStart" value="#{timetableSlot.edited.timeStart}"/>
                            <h:outputLabel for="timeEnd" value="#{msg['timetable.slots.end']}"/>
                            <h:inputText id="timeEnd" value="#{timetableSlot.edited.timeEnd}"/>
                            <h:commandButton type="submit" styleClass="sc-button incomplete" action="#{timetableSlot.save}" value="#{msg['nav.save']}">
                                <f:ajax render=":sc-timetable-slots" onevent="reRender"/>
                            </h:commandButton>
                        </h:panelGrid>                            
                    </h:form>
                </h:panelGroup>

The commandLinks work fine, but the “save” commandButton doesn’t. It’s not the “rendered” attribute, I tried without it, same. The thing is, it doesn’t fire at all, no XHR gets generated, the button is dead. I tried different combinations, even setting the “render” attribute to “@all”. Still nothing. The last time I asked about something involving commandButton and ajax, I was in a hurry so I worked around it eventually – but this time I’d like to get to the bottom of it. 😀

Answer 1

Disclaimer: I haven’t tried to reproduce this locally because it’s too much code and not SSCCE-worthy

However, I know that when you have multiple ajax forms which render each other by a general/common parent ID, then any submit of the other form on a subsequent request will fail because the view state is not appended as a hidden field after re-render by JS. But, if that was the case, then a second attempt to submit it should actually work. Perhaps there is more into the story, but to start, you need to explicitly specify the ID of the other form in the render attribute of the <f:ajax>.

Do it for the both <f:ajax> tags inside the first form:

<f:ajax render=":sc-timetable-slots :sc-timetable-slots-edit" onevent="reRender"/>

In your particular case, the :sc-timetable-slots-edit is the ID of the other form.

See also:

• Ajax rendering of content which contains another form