1

Index.xhtmlという基本的なJSFページと、TestBean.javaというバッキングBeanがあります。基本的に、JSFのajax呼び出しがテーブルをレンダリングした後、テーブルのtd要素に子を追加しようとしています。

コードは次のとおりです。

Index.xhtml：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputScript library="javascript" name="surveyquestions.js"/>
    </h:head>
    <h:body>
        <h:outputLink value="reset.xhtml">reset</h:outputLink>

        <h:form id="myForm">
            <h:panelGroup id="myTable">
                <table>
                    <tr>
                        <td id="targetParent">
                            targetParent here.
                        </td>
                        <td>
                            <h:commandButton value="Click to append a child">
                                <f:ajax event="click" execute="@form"  render="myTable" listener="#{testBean.m()}" onevent="myAppendChild"  />
                            </h:commandButton>
                        </td>
                    </tr>
                </table>

            </h:panelGroup>
        </h:form>

    </h:body>
</html>

また、バッキングBeanにはmと呼ばれるメソッドが1つしかなく、何も実行されません。私は2つのjavascript関数を持っており、それらはで呼び出され<f:ajax event="click" execute="@form" render="myTable" listener="#{testBean.m()}" onevent="myAppendChild" />ます：

function myAppendChild(data){
    if(data.status == "success"){
        var targetParent = document.getElementById("targetParent")
        alert(targetParent.nodeName);
        alert(targetParent.firstChild.nodeValue);
        var spanTag = document.createElement("span");
        spanTag.innerHTML="child";
        targetParent.appendChild(spanTag);

    }
}

function yourAppendChild(data){
    var addButton = data.source;
    if(data.status == "success"){
        var targetParent = addButton.parentNode.parentNode.cells[0];
        alert(targetParent.nodeName);
        alert(targetParent.firstChild.nodeValue);
        var spanTag = document.createElement("span");
        spanTag.innerHTML="child";
        targetParent.appendChild(spanTag);
    }
}

IdがtargetParentであるtd要素に子を追加しようとすると、最初のjavascript関数myAppendChildが正常に機能したことがわかりました。ただし、2番目の関数yourAppendChildは、を削除した場合にのみ機能しましたrender="myTable"。

保持するrender="myTable"と、yourAppendChildは最後まで実行され、エラーなしでappendChildを呼び出しますが、どういうわけか子は追加されません。

両方の関数がまったく同じ要素を取得し、その要素に子を追加しようとしたように見えますが、2番目の関数はでは機能しませんrender="myTable"。

4

1 に答える 1

1

JSF/ajax がビューをレンダリングすると、HTML DOM ツリーが部分的に更新され、新しい要素に置き換えられます。レンダリング前はまだ古い HTML DOM ツリーの一部である JS 関数のaddButton要素は、yourAppendChild()JS 関数が実行された時点では、新しい HTML DOM ツリーのメンバーではありません。基本的に、現在の HTML DOM ツリー内の何も指していないダングリング参照をトラバースしています。基本的にfromではなくaddButtonから要素を直接取得する必要があります。documentdata.source

しかし、その JS アプローチを忘れて、健全で純粋な JSF アプローチを採用することをお勧めします。このキックオフの例が役立つ場合があります:推奨される JSF 2.0 CRUD フレームワーク。

于 2012-07-23T22:07:37.367 に答える