How to call a javascript function and an ajax command by pressing one button?

Question

so what i want is to use 1 button inside a form (because ajax requires to be in a form?) to

1) call a javascript function, which basicly simply does some animation (like fadeout and fadein)

2) call an ajax function that updates an "information" table

so basicly what i want is simply clicking one button , eg "start" then the javascript does some clientside stuff like moving around objects and ajax gives me the information about those objects which are stored on the server..

our stuff looks like this :

<h:panelGroup layout="block" id="player" class="player">
                    <h2 class="accessibility">W&uuml;rfelbereich</h2>
                    <span class="accessibility">An der Reihe ist</span><div id="currentPlayerName"><h:outputText value=" #{spiel.getSpieler_Name()}" /></div>
                    <h:commandButton id="dice" alt="W&uuml;rfel" image="resources/img/wuerfel0.png" action="#{spiel.dice()}" tabindex="4" title="W&uuml;rfel">
                        <f:ajax render=":gameinfo" onevent="animate" />
                    </h:commandButton>
                </h:panelGroup>

so gameinfo is the table with the informations retrieved from the server and called with ajax

and animate is our javascript function which does the animation..

problem here is that animate doesnt work, once we put that ajaax command into a form tag

Answer 1

Try this:

<h:commandButton id="dice" alt="W&uuml;rfel" image="resources/img/wuerfel0.png" action="#{spiel.dice()}" tabindex="4" onclick="animate();" title="W&uuml;rfel">
    <f:ajax render=":gameinfo" />
</h:commandButton>