17

フォームが再レンダリングされた直後に、JavaScript を再実行する必要があります。簡単に言うと、XHTML コンテンツの後に JavaScript を挿入しても、部分的な要求であるため役に立ちません。また、フォームを再レンダリングしているcommandButtonがいくつかの場所で使用されるJSFコンポーネントにあるため、「onComplete」を使用できません。ローカルで修正を取得する必要があります。

何か方法はありますか？この場合、 f:ajax が役立つかどうか疑問に思っていました。

誰かがそれについての手がかりを持っているなら、私に知らせてください。

4

3 に答える 3

40

最も簡単な方法は、更新するコンポーネント自体に JS 関数呼び出しを配置することです。

<h:form>
    ...
    <h:commandButton value="submit"><f:ajax render="@form" /></h:commandButton>
    <h:outputScript>someFunction();</h:outputScript>
</h:form>

このようにして、ページが読み込まれたときに実行され、フォームが ajax によって更新された場合にも実行されます。

それ自体については、その属性<f:ajax>を使用することもできます。onevent

<f:ajax ... onevent="handleAjax" />

と

function handleAjax(data) {
    var status = data.status;

    switch(status) {
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is returned.
            break;

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.
            someFunction();
            break;
    }
}

機能要件がすべての ajax リクエストに適用される場合、すべての属性でjsf.ajax.addOnEvent()それを指定する必要がないように、グローバル フックを追加できます。onevent<f:ajax>

jsf.ajax.addOnEvent(handleAjax);

別の方法は、まさにこの目的のために提供されるOmniFaces JSF ユーティリティ ライブラリを使用することです。<h:onloadScript>好きなように頭に置くことができます。

<h:onloadScript>someFunction();</h:onloadScript>

これは、ビューの ajax リクエストごとに自動的に再実行されるため、ajax 更新可能なビュー内の複数の個別の場所にコピーしたり、親 ID を毎回繰り返したりする必要はありません<f:ajax render>。

于 2012-10-26T10:54:09.000 に答える
0

BalusC の最初の回答は、JQuery/JS で複雑な操作を行いたいが、特に気にしない場合に最も適しています。

より複雑な JS の場合、グローバル イベント ハンドラーを使用することに決めた場合、たとえば JS を使用してbind関数を要素に関連付ける場合、これらの関数は再バインドされます (したがって 2 回実行されます)。再実行されます。

私が最終的に行ったことは、イベント コールバックから ID を取得し、関連する JS/JQuery のみを実行することでした。

jsf.ajax.addOnEvent(ajaxCompleteProcess);


function ajaxCompleteProcess(data) {
    if (data.status && data.status === 'success') {
        var children1 = data.responseXML.children;
        for (i = 0; i < children1.length; i += 1) {
            var children2 = children1[i].children;
            for (j = 0; j < children2.length; j += 1) {
                var children3 = children2[j].children;
                for (y = 0; y < children3.length; y += 1) {
                    if (children3[y].id.indexOf('javax.faces.ViewState') != -1)
                        continue;
                    elementProcess(('#' + children3[y].id.replace(/\:/g, '\\:')));
                }
            }
        }
    }
}

注: これらの醜いforループはおそらく必要ありません (clildren[0] を使用できます) が、仕様を確認する時間がまだありません。

于 2013-12-15T15:06:00.617 に答える
-1

jQuery をアプリケーションに追加して、次のようにすることができます。

$(#yourComponentId).load(function(){
   //execute javascript.
});

ここで見ることができますhttp://api.jquery.com/load/

LE: オンになっている

$(document).ready(function(){
}

の

于 2012-10-26T07:20:05.690 に答える