无法在 JSF 中用 JavaScript 替换 div 内容答案

【问题标题】：Unable to replace div content with JavaScript in JSF无法在 JSF 中用 JavaScript 替换 div 内容
【发布时间】：2013-04-25 08:47:01
【问题描述】：

我使用下面的 JavaScript 代码替换 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>

【问题讨论】：

标签： javascript jsf-2

【解决方案1】：

灵感来自@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>

【讨论】：

【解决方案2】：

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

否则您所做的任何更改都将立即丢失。

【讨论】：

【解决方案3】：

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

你点击按钮。
表单即将提交。
您的 JavaScript 函数已被调用，因此您的 div 的值已更改。
表单已提交。
发生了对同一视图的回发，实际上使您的 div 回到了 hello。

这就是一切的运作方式。

顺便说一句，<div id="myDiv" onclick="Findchange()">hello</div> 正在工作，并且通过使用 onclick 属性不提交带有 <h:commandButton> 的表单，例如：

<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;
    }

}

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

而不是 old 提交使用 <f:ajax 和 execute="@form" render="@form（例如）并在<f:ajax 的success 上调用你的js 代码

<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>

【讨论】：

【解决方案6】：

你应该写“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>

【讨论】：