Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript - showing a commandLink and then Disappearing

I am working on a JSF application and want a simple function- click commandbutton and show a commandLink. I have done a test. The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">

 <head>
  <script type="text/javascript">
   function testfunc() {
     document.getElementById("testForm:test").style.display="block";
     document.getElementById("testForm:test").style.visibility="visible";
   }
   </script>
 </head>

<body>

   <h:form id = "testForm" >
     <h:panelGroup id="test" style="display:none" >
          <h:commandLink value="Page 1" action="page1" /><br/>
     </h:panelGroup>
     <button onclick="testfunc()">Click me</button>
  </h:form> 

 </body>
</html>

The problem is that the link - <h:commandLink value="Page 1" action="page1" /> is shown immediately disappears. Does anyone have any suggestion? Many thanks!

like image 373
Leo Avatar asked Aug 18 '26 03:08

Leo


1 Answers

I changed your xhtml to and it works. I changed type of button as button instead of default submit. i also changed body to h:body. You can keep panelGroup or use panelGrid like me.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html">

    <head>
     <script type="text/javascript">
     function testfunc() {
      document.getElementById("testForm:test").style.display="block";
    document.getElementById("testForm:test").style.visibility="visible";
    }
   function hidefunc() {
     document.getElementById("testForm:test").style.display="none";
     document.getElementById("testForm:test").style.visibility="hidden";
   }
    </script>
</head>

<h:body>

  <h:form id = "testForm" >
      <h:panelGrid id="test" style="display:none" >
        <h:commandLink value="Page 1" action="page1" /><br/>
       </h:panelGrid>
       <button onclick="testfunc()" type="button">Show me</button>
       <button onclick="hidefunc()" type="button">Hide me</button>
     </h:form> 

    </h:body>
 </html>
like image 91
Mahendran Ayyarsamy Kandiar Avatar answered Aug 19 '26 17:08

Mahendran Ayyarsamy Kandiar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!