Question

(Using jsf-2)

I have a dataTable with one column which can be edited:

        <h:column>
            <f:facet name="header">
                <h:outputText value="Label" style="font-weight: bold">
                </h:outputText>
            </f:facet>
            <h:inputText value="#{m.author2displayed}" rendered="#{m.editable}" size="10"/>
            <h:outputText value="#{m.author2displayed}" rendered="#{not m.editable}"/>
            <h:commandButton value="save edits" rendered="#{m.editable}" onclick="submit()" action ="#{finalCheckBean.saveedits()}"/>
        </h:column>

When I click on “save edits”, we stay on the same view and that’s the desired effect (finalCheckBean.saveedits() returns null).

Problem: the browser scrolls all back to the top of the page, whereas I’d like that the page stays displayed at the level of the row just edited. How can I achieve that?

Answer 1

If you’re already using JSF2, just bring in some ajax magic using <f:ajax> in the command button. Wrap the to-be-executed and rendered components in a common component and reference it in execute and render of <f:ajax>.

<h:column>
    <f:facet name="header">
        <h:outputText value="Label" style="font-weight: bold" />
    </f:facet>
    <h:panelGroup id="author2displayed">
        <h:inputText value="#{m.author2displayed}" rendered="#{m.editable}" size="10"/>
        <h:outputText value="#{m.author2displayed}" rendered="#{not m.editable}"/>
        <h:commandButton value="save edits" rendered="#{m.editable}" onclick="submit()" action="#{finalCheckBean.saveedits()}">
            <f:ajax execute="author2displayed" render="author2displayed" />
        </h:commandButton>
    </h:panelGroup>
</h:column>

This way the scroll position will remain unchanged (provided that you still return null or void from the action method).