CODEWITHSUNDEEP
javascripthtmlajaxjsffacelets
Jakob Nielsen
Jakob Nielsen

Reputation: 5198

JSF execute Ajax before a onClick Event

I have a Javascript function which changes the position of some elements according to some hiddenfields in the document, which are updated regularly with ajax.

Problem:

Since the javascript function (onclick) is executed before the Ajax (which reloads the element in which the hiddenfields are) the elements which should change position are always one turn behind.

What I want to achive:

The Problem would be solved if the ajax reload is executed before the onclick Event, so the reference to the hiddenfields would be correct. (and not on turn behind)

Is this possible in any way or is there another solution to this problem??

Code:

Call:

                <h:commandButton id="dice" onclick="animate()" 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>

Javascript Function:

    function animate() {
        var newPlayer1 = document.getElementById('player1score').value;
        var newPlayer2 = document.getElementById('player2score').value;
        // Spieler 1 Animation
        $("#player1").fadeOut(700, function() {
            $("#player1").appendTo(newPlayer1);
            $("#player1").fadeIn(700);
});
        // Spieler2 Animation
        $("#player2").delay(1400).fadeOut(700, function() {
            $("#player2").appendTo(newPlayer2);
            $("#player2").fadeIn(700);
});
    }

Upvotes: 2

Views: 5908

Answers (1)

Daniel
Daniel

Reputation: 37061

You should use the onevent of the f:ajax

  <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" onevent="animate" />                            
  </h:commandButton>

change your animate function into 

function animate(data) {
    if (data.status === 'success') {
        //your original code goes here...
    }
}

Also : read this answer by BalusC : Proccess onclick function after ajax call

Upvotes: 2

Related Questions