Javascript - showing a commandLink and then Disappearing
Question
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!
1 answers
solution1
2 ACCPTED 2015-11-18 17:03:31
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.