JSF 在 onClick 事件之前执行 Ajax答案

【问题标题】：JSF execute Ajax before a onClick EventJSF 在 onClick 事件之前执行 Ajax
【发布时间】：2013-05-02 20:55:24
【问题描述】：

我有一个 Javascript 函数，它可以根据文档中的一些隐藏字段更改某些元素的位置，这些隐藏字段会使用 ajax 定期更新。

问题：

由于javascript函数（onclick）在Ajax（重新加载隐藏字段所在的元素）之前执行，因此应该改变位置的元素总是落后一圈。

我想要达到的目标：

如果在 onclick 事件之前执行 ajax 重新加载，问题将得到解决，因此对隐藏字段的引用是正确的。（而不是在后面转弯）

这是否有可能，或者是否有其他解决方案？

代码：

呼叫：

                <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 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);
});
    }

【问题讨论】：

标签： javascript html ajax jsf facelets

【解决方案1】：

您应该使用f:ajax 的onevent

  <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>

将您的 animate 函数更改为

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

另外：阅读 BalusC 的回答：Proccess onclick function after ajax call

【讨论】：