Javascript- How to show div when close button is clicked?
Question
I have a web page that looks like below:
So after clicking the Edit URL button, it shall bring me to this page:
So it works as expected and how I did it was I hide the body of content of the first page so it shows the second page.As you can see, there is a x on the top left corner of second page that when clicked, it shall close that windows and show the first page again. This is self explanatory i guessed.
This is my javascript function:
//function to call the edit the page
function editURL(filename,url){
var x=document.getElementById("table123");
x.style.display="none";
$('body').pWin("open", {
x: 260,
y: 47,
height: 450,
width: 881,
title: "Edit:Advance Configuration",
skinMode:'dialog',
iframe:true,
url: "editUrl.jsp",
data: {
filename:filename,
link:url
},
offResize:true,
offMove:true,
onTitle:false,
offBottom:true
});
}
</script>
As shown above, I used display=none to hide the first page when the button is clicked, I can't figure out how do I show the page back when the close button in second page is clicked.It will show empty content if I clicked the x button but using display:block in the same function won't work.
I appreciate any suggestion.
Edit:
This is my jquery pwin : (it's a little bit long)
$.extend({
pWin_defaults : {
prefix: 'w', // need to be seperate per iframe
id : 0,
images : 'images/bsWin/',
imgTopLeft : 'tl.png',
imgTopRight: 'tr.png',
imgTopCenter : 'centerslice.png',
imgTopLeftDialog : 'tl_dialog.png',
imgTopRightDialog : 'tr_dialog.png',
imgTopCenterDialog : 'tc_dialog35.png',
imgCloseButton : 'close.gif',
imgCloseButtonDialog : 'dialog_close.png',
imgBotLeft : 'bottom_left.png',
imgBotCenter : 'bottom_ctr.png',
imgBotRight : 'bottom_right.png',
imgResize : 'resize_btn.png',
openParam : new Array(
'x', 'y', 'width', 'height', 'title'
),
topHeight : 35, // top bar height
DialogTopHeight:29,
botHeight : 19, // bottom bar height
cornerWidth: 5, // top and bottom left right corner widths
winZIndex : 10000,
winMap : {},
engageWinMove : undefined,
engageWinResize : undefined,
engageX : undefined,
engageY : undefined,
resizeProperties: {},
isIE: navigator.userAgent.indexOf('MSIE')>=0?true:false
},
$.fn.extend({
pWin: function (option, settings) {
if (option == "open") {
for (var i=0; i<$.pWin_defaults.openParam.length; i++) {
if (!settings[$.pWin_defaults.openParam[i]]) {
alert('pWin.open requires ' + $.pWin_defaults.openParam[i]);
return false;
}
}
var skinMode = 'basic';
if (settings.skinMode) {
skinMode = settings.skinMode;
}
var id = ++$.pWin_defaults.id + $.pWin_defaults.prefix;
var winWidth = settings.width;
var winHeight = settings.height;
var winY = settings.y;
var winX = settings.x;
var divWindow = $('<div id=\'pWin_'+id+'\' class=\'pWin\'></div>');
divWindow.title = settings.title;
divWindow.bind('click', function() { $(this).pWin_activate() });
if (skinMode == 'dialog') {
divWindow.addClass('pWinDialog');
}
if (skinMode == 'basic') {
topCenter.addClass('pWinTitleBasic');
textWidth = $.pWin_text_width(settings.title, 'pWinTitleBasic', '');
} else if (skinMode == 'dialog') {
topCenter.addClass('pWinTitleDialog');
textWidth = $.pWin_text_width(settings.title, 'pWinTitleDialog', '');
}
var iePad = 0;
if ($.pWin_defaults.isIE) {
iePad = 6;
}
//topCenter.css('width', winWidth - $.pWin_defaults.cornerWidth * 2 - iePad);
topCenter.css('width', winWidth - iePad);
topCenter.css('height', $.pWin_defaults.topHeight);
if (skinMode == 'dialog') {
topCenter.css('height', $.pWin_defaults.DialogTopHeight);
}
if (skinMode == 'basic') {
//topCenter.css('background', 'url(' + $.pWin_defaults.images + $.pWin_defaults.imgTopCenter + ') repeat-x');
} else if (skinMode == 'dialog') {
//topCenter.css('background', 'url(' + $.pWin_defaults.images + $.pWin_defaults.imgTopCenterDialog + ') repeat-x');
}
if (!settings.offMove) {
topCenter.bind('mousedown', function(e) { $(this).pWin_move_lock(e) });
topCenter.addClass('pWinMove');
}
var topTitleName = $('<div class=\'pWinTitleText\' id=\'pWinTitleName_'+id+'\' >'+settings.title+'</div>');
var topButton = $('<div title=\'Close Window\' class=\'pWinCursor pWinTitleButton\' ></div>');
if (skinMode == 'basic') {
topButton.html('<img class=\'pWinCursor\' src=\'' + $.pWin_defaults.images + $.pWin_defaults.imgCloseButton + '\'/>');
} else if (skinMode == 'dialog') {
topButton.addClass('pWinButtonDialog');
topButton.html('<img class=\'pWinCursor\' src=\'' + $.pWin_defaults.images + $.pWin_defaults.imgCloseButtonDialog + '\'/>');
}
if (skinMode == 'basic') {
topTitleName.addClass('pWinTitleNameBasic');
} else if (skinMode == 'dialog') {
topTitleName.addClass('pWinTitleNameDialog');
}
if (settings.onClose) {
topButton.bind('mousedown', settings.onClose);
}
topButton.bind('mousedown', function() {
$(this).pWin('close', id);
});
topCenter.append(topTitleName);
topCenter.append(topButton);
if (!settings.offTitle) {
//divWindow.append(topLeft);
divWindow.append(topCenter);
//divWindow.append(topRight);
divWindow.append(clear);
}
var winContent = $('<div id=\'pWinContent_'+id+'\' class=\'pWinContent\'></div>');
winContent.css('width', winWidth - 2); // minus 2 for the borders
winContent.css('height', winHeight);
if (settings.corner) {
winContent.css('-moz-border-radius', '5px');
}
if (skinMode == 'basic') {
winContent.addClass('pWinContentBasic');
} else {
winContent.css('height', winHeight + 20);
}
var winFrame = undefined;
EDIT:
My HTML code for genurl.jsp (the first screenshot):
<html>
<%
String relPath = "../../../";
NodeFacadeLocal nFacade = null;
InitialContext ntx = new InitialContext();
try {
nFacade = (NodeFacadeLocal) ntx.lookup("java:comp/env/node");
} catch (NamingException e) {
e.printStackTrace();
}
//grabs the file id of each file
//long nodeID = Long.parseLong(request.getParameter("nodeID"));
/*String[] split1 = request.getParameter("nodeID").split(",",0);
for(int i=0;i<split.length;i++){
long file=Long.parseLong(split[i]);
}*/
%>
<head>
<title>Generate URL</title>
</head>
<body>
<div id="table123" style="overflow:scroll;height:400px;width:100%;overflow:auto">
<table class="filesTbl">
<tr>
<th width="1%">
Checkbox
</th>
<th width="1%">
No
</th>
<th width="20%">
File Name
</th>
<th width="50%">
Unique URL
</th>
<th width="1%">
Edit
</th>
<th width="1%">
Copy
</th>
<th width="1%">
Email
</th>
</tr>
<%
//need to input logic to populate data on each row
int counter=0;
int tally=0;
String[] split = request.getParameter("nodeID").split(",",0);
for(int i=0;i<split.length;i++){
long file=Long.parseLong(split[i]);
List files = fileFacade.list_items(file);
for (Iterator rstltr = files.iterator(); rstltr.hasNext();) {
Fmedia fv = (Fmedia) rstltr.next();
Node nd = nodeFacade.get(fv.getNodeid(), false);
// Fmedia fm = fileFacade.get_file(fv.getNodeid());
int count = 0;
count++;
long fileid= nd.getNodeid();
SettingsFacadeLocal settingFacade = (SettingsFacadeLocal)ctx.lookup("java:comp/env/settings");
String redirectURL = settingFacade.get("SERVER_URL").getAtval();
//declare a timestamp for unique URL
// String timeStamp=new SimpleDateFormat("yyyy.MM.dd.HH.mm.ss").format(new java.util.Date());
// String hash = org.apache.commons.codec.digest.DigestUtils.sha256Hex(timeStamp);
SecureRandom secureRandom=new SecureRandom();
byte[] token = new byte[12];
secureRandom.nextBytes(token);
String hash= new BigInteger(1, token).toString(12);
%>
<tbody>
<tr>
<td width="5%">
<script>
// function to copy multiple URL links
function copymultiplelink() {
var selectedFiles = $('.fileCheck:checked');
if(selectedFiles.length < 1 ){
alert("Please select at least one file.");
return false;
}
var filesList = [];
var $fileChecks = $('.fileCheck:checked');
$fileChecks.each(function() {
filesList.push($(this).val());
});
alert("You have copied " + filesList.length+ " URL");
copyURL(filesList.join("\n"),false);
}
//function to call the edit the page
function editURL(filename,url){
var x=document.getElementById("table123");
x.style.display="none";
$('body').pWin("open", {
x: 260,
y: 47,
height: 450,
width: 881,
title: "Edit:Advance Configuration",
skinMode:'dialog',
iframe:true,
url: "editUrl.jsp",
data: {
filename:filename,
link:url
},
offResize:true,
offMove:true,
onTitle:false,
offBottom:true
});
// x.style.display="none";
}
</script>
<!--Display Checkbox -->
<input type="checkbox" class="fileCheck" id="<%=tally=tally+1%>" value="<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>" />
</td>
<td>
<!--Display No -->
<% counter=counter+1;
out.print(counter);
%>
</td>
<td width="28%">
<!-- Display Filename -->
<%=nd.getNodedesc()%>
</td>
<td width="100%">
<!-- Display Unique URL -->
<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>
<%
fileFacade.insert_url(nd.getNodeid(),"f0="+nd.getNodeid()+"&ts="+hash);
//fileFacade.insert_url(nd.getNodeid(),"{syscont url}/repository/file/view/viewPDF.jsp?{url});
%>
</td>
<td>
<!-- Display EDIT/DEL -->
<input type="button" value="Edit URL" onclick="editURL('<%=nd.getNodedesc()%>','<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>')" >
</td>
<td> <!-- Display COPY feature -->
<input type="button" value="Copy URL" onclick="copyURL('<%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&ts="+hash%>',true)">
</td>
</tr>
</tbody>
<%}}
%>
<script>
function copyURL(url,showMsg) {
var copyText = url;
var el = document.createElement('textarea');
el.value = copyText;
el.setAttribute('readonly', '');
el.style = {
position: 'absolute',
left: '-9999px'
};
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if(showMsg==true) {
alert("You have copied the URL");
}
}
</script>
</table>
<!--Copy button to copy multiple links -->
<div class="wrapper">
<button type="button" onclick="copymultiplelink()"> Copy Selected URL</button>
</div>
</div>
<style>
.wrapper {
position: absolute;
top: 90%;
left: 5%;
}
</style>
</body>
</html>
It calls the editURL.jsp:
</head>
<%
// get the values of filename and URL link
String files= request.getParameter("filename");
String url=request.getParameter("link");
%>
<body>
<script>
</script>
File Name:<input type="text" size="30" name="Filename" value="<%=files%>" readonly><br><br>
URL Link:<input type="text" size="100" name="URL Link" value="<%=url%>" readonly><br><br>
Start Date:<input type="text" name="Start Date" value="Mickey"><br><br>
End Date:<input type="text" name="End Date" value="Mickey"><br><br>
1 answers
solution1
0 2019-03-25 02:54:41
This is your element, x
var x=document.getElementById("table123");
Now you only need the close button to change the value of x.style.display to "block"
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.
Related Question
show a div onclick and Hide div when clicked outside of it and close button
How to show div content and hide others when button is clicked - JavaScript
Javascript show div when button is clicked
How to show a div when a particular button is clicked,
How to show a div when a button is clicked
How to show specific div when button was clicked?
how to show elements when button was clicked in JavaScript
Javascript - show a button inside of a DIV when clicked (and hide all others)
Javascript hide/show div when the next button is clicked
Javascript- How to reset button counter when timer reaches 0
Related Tags