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

该方法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

事实上，如果您按原样分析代码，您会得到“近似”的事件转折点：

  1. 你点击按钮。
  2. 表格即将提交。
  3. 你的 JavaScript 函数被调用，因此你的值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 方法是使用 AJAX（或者同步）更新 div 的内容，例如：

<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

您不应该提交表单来执行此操作。如果您提交它将丢失并且页面将再次刷新。

您已经在按钮级别调用了 JavaScript 函数，如下所示，并且按钮不应提交如下代码中所写的表单，

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

灵感来自@louisbros：

    <h:head>
        <script>
            function Findchange(){
                document.getElementById('myDiv').innerHTML = 'ravi';
                return false;
            }
        </script>
    </h:head>
    <h:form onsubmit="return Findchange();">
        <div id="myDiv">hello</div>
        <h:commandButton value="test" />
    </h:form>
于 2013-04-25T11:33:32.580 回答
0

而不是旧的提交使用<f:ajax（execute="@form" render="@form 例如）并调用你的jssuccess代码<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

你应该写“ form:myDiv ”，而不仅仅是“ myDiv ”这样

<h:head>
   <script type="text/javascript">
     function Findchange() {
       document.getElementById("form: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>
于 2014-12-02T14:24:44.677 回答