JSF一个onclick事件之前执行阿贾克斯 [英] JSF execute Ajax before a onClick Event

问题描述

我有一个JavaScript函数，改变一些元素按照一定hiddenfields文档中，这是用Ajax定期更新的位置。

问题：

由于JavaScript函数（的onclick）被阿贾克斯（其中重新加载在其中hiddenfields是元素），它应改变位置的元素始终执行前一个回合之后。

我想才达到什么：

问题是，如果阿贾克斯重装onclick事件之前执行解决，所以引用了hiddenfields是正确的。 （而不是把后面）

这是可能以任何方式或有另一种解决这个问题？

code：

电话：

 ＆LT; H：的commandButton ID =骰子的onclick =动画（）ALT =W＆放大器; uuml; RFEL麻省理工学院einer一型形象=资源/ IMG / wuerfel1。 PNG行动=＃{spiel.dice（）}的tabindex =4称号=W＆放大器; uuml; RFEL麻省理工学院einer一型＆GT;
                    ＆LT; F：AJAX渲染=的GameInfo/＆GT;
                ＆LT; / H：的commandButton＆GT;
 

JavaScript函数：

 功能动画（）{
        。VAR newPlayer1 =的document.getElementById（'player1score'）值;
        。VAR newPlayer2 =的document.getElementById（'player2score'）值;
        //斯皮勒1动画
        $（＃PLAYER1）。淡出（700，函数（）{
            $（＃PLAYER1）appendTo（newPlayer1）。
            $（＃PLAYER1）淡入（700）。
}）;
        // Spieler2动画
        $（＃player2）。延迟（1400）.fadeOut（700，函数（）{
            $（＃player2）appendTo（newPlayer2）。
            $（＃player2）淡入（700）。
}）;
    }
 

解决方案

您应该使用的的OnEvent 的 F：AJAX

 ＆LT; H：的commandButton ID =骰子ALT =W＆放大器; uuml; RFEL麻省理工学院einer一型形象=资源/ IMG / wuerfel1.png行动=＃{ spiel.dice（）}的tabindex =4称号=W＆放大器; uuml; RFEL麻省理工学院einer一型＆GT;
      ＆LT; F：AJAX渲染=的GameInfo的OnEvent =动画/＆GT;
  ＆LT; / H：的commandButton＆GT;
 

更改动画功能分为

 动画功能（数据）{
    如果（data.status ==='成功'）{
        //你原来的code到这里...
    }
}
 

---

另外：阅读此答案由 BalusC ： Proccess的onclick Ajax调用

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

解决方案

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

这篇关于JSF一个onclick事件之前执行阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！