6

フォームを送信した後、選択したコンポーネント ID を選択してフォーカスしようとしています (ajax 呼び出し)。

<script>
var myFunc = function() {
  document.getElementById('form:#{bean.componentId}').focus();
  document.getElementById('form:#{bean.componentId}').select();
};

$(document).ready(function() {
  myFunc();
});
</script>

<h:form id="form">
  <h:commandButton action="#{bean.save}" onclick="return myFunc();" ...>
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...
</h:form>

このソリューションは機能していますが、問題は<f:ajax>AFTER と呼ばれるonclickため、コンポーネントの選択後にフォームがレンダリングされ、フォーカスがクリアされます。

フォームがレンダリングされた後に関数を呼び出すにはどうすればよいですか?

更新：（たとえば試しました）

  • add onevent="myFunc();"to f:ajax=> ページの更新につながります
  • onevent="myFunc()"に追加=>属性f:ajaxと同じ動作onclick
  • 次にattrf:ajaxで。onevent＝＞相変わらず

update2 (どのように動作するか):

  • 送信ボタンは ajax と呼ばれる
  • フォームは必要に応じてクリーンアップされます
  • 適切なフィールドがフォーカスされています (ユーザーが選択した要因によって異なります)
4

1 に答える 1

26

ハンドラーは実際にはonevent3 回呼び出され、関数自体ではなく、関数名を指す必要があります。ajax リクエストが送信される前に 1 回、ajax レスポンスが到着した後に 1 回、HTML DOM が正常に更新されたときに 1 回。statusそのために、指定されたデータ引数のプロパティをチェックする必要があります。

function listener(data) {
    var status = data.status; // Can be "begin", "complete" or "success".

    switch (status) {
        case "begin": // Before the ajax request is sent.
            // ...
            break;

        case "complete": // After the ajax response is arrived.
            // ...
            break;

        case "success": // After update of HTML DOM based on ajax response..
            // ...
            break;
    }
}

したがって、特定のケースでは、ステータスが であるかどうかのチェックを追加するだけですsuccess。

function myFunc(data) {
    if (data.status == "success") {
        var element = document.getElementById('form:#{bean.componentId}');
        element.focus();
        element.select();
    }
}

そして、関数をその名前で参照する必要があります。

<f:ajax ... onevent="myFunc" />
于 2012-11-24T11:48:12.527 に答える