Javascript code to get back to the same page when click the cancel button
Question
I am using javascript code to expand and collapse my div contents.The follwing are my code.
<style type="text/css">
.gap
{
border:1px solid black
}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
function edit(id,item)
{
var e = document.getElementById(id);
var f = document.getElementById(item)
e.innerHTML=f.innerHTML;
}
</script>
<a href="#" onclick="toggle_visibility('id1');" ><div class="gap">Click here to toggle visibility of element #foo</div></a>
<div id="id1" style="display:none;">This is foo</div>
<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">Click here to see wonder</div></a>
<div id="id2" style="display:none;">Tsdgdfsehd
<div> <a href="#" onclick="edit('id2','id3');">Edit</a></div>
</div>
<div id="id3" style="display:none;">Edit
<div> <a href="#" onclick="edit('id3','id2');">cancel</a></div>
</div>
The problem I am facing is..when I click the second div,It is expanding and I have given a edit option inside the 2nd div..and click the edit it is overriding the second div elements and displaying the 3rd div element. The same way,In the 3rd div I have given the link for cancel the edit section and to display the 2nd div contents..but it is not displaying..
I am waiting for help..
Thanks In advance
4 answers
solution1
0 2013-06-18 05:02:58
取消时，调用包含以下内容的JavaScript函数：
window.location=window.location;
solution2
0 ACCPTED 2013-06-18 05:18:17
Use
location.reload();
Use the following function on cancel click
function cancel(){
location.reload();
}
<a href="#" onclick="cancel()">cancel</a>
Use the following for realoding div 2
function edit(id,item)
{
var e = document.getElementById(id);
var f = document.getElementById(item);
// Add this line additional
document.getElementById('id4').innerHTML=e.innerHTML;
e.innerHTML=f.innerHTML;
}
function cancel(){
document.getElementById('id2').innerHTML=document.getElementById('id4').innerHTML;
}
<a href="#" onclick="cancel()">cancel</a>
also add this hidden div
<div id="id4" style="display:none;"></div>
solution3
0 2013-06-18 05:24:13
This is the only way ,i find in your code
onclick="toggle_visibility('id2');
<div id="id3" style="display:none;">Edit
<div> <a href="#" onclick="toggle_visibility('id2');">cancel</a></div>
</div>
solution4
0 2013-06-18 06:06:47
your solution is here
check here jsfiddle
<%--
Document : ul
Created on : Jun 18, 2013, 10:23:01 AM
Author : Genesh
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<style type="text/css">
.gap
{
border:1px solid black
}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
function edit(id,item)
{
var e = document.getElementById(id);
e.style.display = 'block';
var s = document.getElementById(item);
s.style.display = 'none';
}
function edit1(id,item)
{
var e = document.getElementById(id);
e.style.display = 'block';
var s = document.getElementById(item);
s.style.display = 'none';
}
</script>
<a href="#" onclick="toggle_visibility('id1');" ><div class="gap">Click here to toggle visibility of element #foo</div></a>
<div id="id1" style="display:none;">This is foo</div>
<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">Click here to see wonder</div></a>
<div id="id2" style="display:none;">Tsdgdfsehd
<div> <a href="#" onclick="edit('id3','id2');">Edit</a></div>
</div>
<div id="id3" style="display:none;">Edit
<div> <a href="#" onclick="edit1('id2','id3');">cancel</a></div>
</div>
</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.