JSF Ajax调用不在上下文中

Question

I have a Facelet which has a div called "gameinfo" , by clicking on a certain button this div should be reloaded with Ajax.

Problem:

The call does't work, it throws the following error:

<f:ajax> contains an unknown id 'gameinfo' - cannot locate it in the context of the component dice

I don't know how to fix it, maybe the div needs to be nearer the button, or maybe only elements in the h: namespace can be called with ajax?

Code:

            <div id="gameinfo" class="info">
                <h2>Spielinformationen</h2>
                <table summary="Diese Tabelle zeigt Informationen zum aktuellen Spiel">
                    <tr><th id="leaderLabel" class="label">F&uuml;hrender</th><td id="leader" class="data"><h:outputText value="#{spiel.getLeader()}" /></td></tr>
                    <tr><th id="roundLabel" class="label">Runde</th><td id="round" class="data"><h:outputText value="#{spiel.getRound()}" /></td></tr>
                    <tr><th id="timeLabel" class="label">Zeit</th><td id="time" class="data"><h:outputText value="#{spiel.getTime()}" /></td></tr>
                    <tr><th id="computerScoreLabel" class="label">W&uuml;rfelergebnis <em>Super C</em></th><td id="computerScore" class="data"><h:outputText value="#{spiel.getComputerScore()}" /></td></tr>
                </table>  
                <h2>Spieler</h2>
                <table summary="Diese Tabelle listet die Namen der Spieler auf">
                    <tr><th id="player1NameLabel" class="label">Spieler 1</th><td id="player1Name" class="data">Super Mario</td></tr>
                    <tr><th id="player2NameLabel" class="label">Spieler 2</th><td id="player2Name" class="data">Super C</td></tr>
                </table>          
            </div>

And the Ajax Call:

            <div id="player" class="player">
                <h2 class="accessibility">W&uuml;rfelbereich</h2>
                <span class="accessibility">An der Reihe ist</span><div id="currentPlayerName">Super Mario</div>
                <h:form id="form">
                    <h:commandButton id="dice" alt="W&uuml;rfel mit einer Eins" image="resources/img/wuerfel1.png" action="#{spiel.dice()}" tabindex="4" title="W&uuml;rfel mit einer Eins">
                        <f:ajax render="gameinfo" />
                    </h:commandButton>
                </h:form>
            </div>

Edit: solved! I changed the <div> into <h:Panelgroup> and deleted the <h:form> in which the button was.

Answer 1

<f:ajax should point to a JSF component

Replace

<div id="gameinfo" class="info">

With

<h:panelGroup layout="block" id="gameinfo" styleClass="info">

---

<h:panelGroup layout="block" will turn into a html div