1

以下の JavaScript コードを使用して a の内容を置き換えていますdivが、機能していません。

<h:head>
    <script type="text/javascript">
        function Findchange() {
            document.getElementById("myDiv").innerHTML='ravi';
        }
    </script>
</h:head>
<h:body>
    <h:form  id="form" onsubmit="Findchange();">
        <div id="myDiv">hello</div>
        <h:commandButton value="submit" ></h:commandButton>
    </h:form>
</h:body>
4

6 に答える 6

0

実際、コードをそのまま分析すると、イベントの「おおよその」順番は次のようになります。

  1. ボタンをクリックします。
  2. フォームが送信されようとしています。
  3. JavaScript 関数が呼び出されるため、 your の値div が変更されます。
  4. フォームが送信されます。
  5. 同じビューへのポストバックが発生し、実質的に にdiv戻りましたhello。

これがすべての仕組みです。

ちなみに、次のように、その属性を使用<div id="myDiv" onclick="Findchange()">hello</div>してフォームを送信しないだけでなく、機能しています。<h:commandButton>onclick

<h:commandButton value="submit" onclick="return Findchange()"/>

と

function Findchange() {
    document.getElementById("myDiv").innerHTML='ravi';
    return false;
}

補足として、機能を実現するための JSF の方法は、次のように div の内容を AJAX で (または代わりに同期的に) 更新することです。

<h:form  id="form">
    <h:panelGroup id="div-id" display="block">
        #{bean.name}
    </h:panelGroup>
    <h:commandButton value="Submit" action="#{bean.changeName}">
        <f:ajax render="div-id"/>
    </h:commandButton>
</h:form>

豆入り

@ManagedBean
@RequestScoped
public class Bean {

    private String name = "Josh";//getter + setter

    public String changeName() {
        name = "Ravi";
        return null;
    }

}
于 2013-04-25T09:57:36.860 に答える
0

メソッドgetElementByIdはドキュメント オブジェクトで定義されます。したがって、次のように使用します。

document.getElementById('myDiv').innerHTML = 'ravi';

return falseまた、ページが送信されないようにする必要がある場合があります。

<script>
    function Findchange(){
        document.getElementById('myDiv').innerHTML = 'ravi';
        return false;
    }
</script>

<form onsubmit="return Findchange();">
    <div id="myDiv">hello</div>
    <input type="submit"/>
</form>

そうしないと、行った変更がすぐに失われます。

于 2013-04-25T08:50:53.310 に答える
0

古い送信の代わりに(たとえば) を使用<f:ajaxしexecute="@form" render="@form 、js コードsuccessを<f:ajax

<h:head>
    <script type="text/javascript">
        function Findchange() {
            document.getElementById("myDiv").innerHTML='ravi';
        }
    </script>
</h:head>
<h:body>
    <h:form  id="form">
        <div id="myDiv">hello</div>
        <h:commandButton value="submit" >
            <f:ajax execute="@form" render="@form" onevent="function(data) { if (data.status === 'success') {Findchange(); } }"></f:ajax>
        </h:commandButton>
    </h:form>
</h:body>
于 2013-04-25T11:55:23.210 に答える
0

これを行うためにフォームを送信しないでください。送信すると失われ、ページが再度更新されます。

以下に示すように、ボタン レベルで JavaScript 関数を呼び出しました。ボタンは、以下のコードに記述されているようにフォームを送信してはなりません。

<h:commandButton value="submit" type="button" onclick="Findchange()"></h:commandButton>
于 2013-04-25T10:10:56.187 に答える