无法用JSF中的JavaScript代替div内容

Question

我使用下面的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> 

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

Answer 2

方法getElementById在文档对象上定义。因此，使用这样的：

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

你也可能需要returnfalse所以页面没有提交：

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

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

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

Answer 3

事实上，如果你作为是分析代码，你会得到事件的“近似”依次为：

1. 单击该按钮。
2. 表单即将提交。
3. 您的JavaScript函数被调用，因此您的div的值被更改为。
4. 表单已提交。
5. 回到相同的观点发生了，有效地使您的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; 
    } 

} 

Answer 4

你不应该提交表单来做到这一点。如果您提交它会丢失，页面将再次刷新。

你必须调用在按钮级别的JavaScript函数如下图所示，写在下面的代码按钮将不能提交表单，

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

Answer 5

相反的旧提交使用<f:ajax与execute="@form" render="@form（举例） 并致电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> 

Answer 6

ü应该写 “形式：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>