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

Question

I use the JavaScript code below to replace contents of a div , but it's not working.

<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

The method getElementById is defined on the document object. So use it like this:

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

Also you might need to return false so the page isn't submitted:

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

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

Otherwise any change you make will be immediately lost.

Answer 2

In fact, if you analyze code as is , you'll get the 'approximate' turn of events as:

1. You click the button.
2. The form is about to be submitted.
3. Your JavaScript function is called, thus value of your div is changed .
4. Form is submitted.
5. A postback to the same view happened, effectively making your div back to hello .

This is how it all works.

By the way, <div id="myDiv" onclick="Findchange()">hello</div> is working, as well as not submitting a form with <h:commandButton> by employing its onclick attribute, like in:

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

with

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

---

As a side note, the JSF way to achieve your functionality is to update the contents of the div with AJAX (or instead synchronously) like:

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

with bean

@ManagedBean
@RequestScoped
public class Bean {

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

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

}

Answer 3

You should not submit the form to do this. If you submit for it will get lost and page will refresh again.

You have invoke the JavaScript function at button level as shown below and button should NOT submit the form as written in the code below,

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

Answer 4

Inspired from @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 5

Instead of old submit use <f:ajax with execute="@form" render="@form (for example) And call your js code on success of the <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

u should write " form:myDiv " not only " myDiv " like that

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