By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,117 Members | 2,178 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,117 IT Pros & Developers. It's quick & easy.

Making a table visible/invisible depending on some event

100+
P: 157
Hi all,

I am working on a web application using JSP and Javascript.
I have attached a snapshot of my form here,

I have 2 different Jsps here, viz Jsp1 and Jsp2.
On hitting the 'Show' button on Jsp1 I make another Jsp(Jsp2) pop up as a subwindow containing a Table T1.

But many users have popup blockers turned on and in that case Jsp2 doesnot even show up,so is there any alternative such that I can show Table T1 as a part of Jsp1 itself.The table should appear on top of the form(Jsp1) and not in a different window,i.e it should be invisible at first and only when user hits 'Show' on Jsp1 T1 should be seen.

Can this perhaps be achieved by using <div> ?
I am not much familiar with DOM and Javascript so any suggestions regarding this would be very helpful.
Attached Images
File Type: jpg snapshot1.jpg (6.8 KB, 1403 views)
Jan 23 '07 #1
Share this Question
Share on Google+
21 Replies


10K+
P: 13,264
Hi all,

I am working on a web application using JSP and Javascript.
I have attached a snapshot of my form here,

I have 2 different Jsps here, viz Jsp1 and Jsp2.
On hitting the 'Show' button on Jsp1 I make another Jsp(Jsp2) pop up as a subwindow containing a Table T1.

But many users have popup blockers turned on and in that case Jsp2 doesnot even show up,so is there any alternative such that I can show Table T1 as a part of Jsp1 itself.The table should appear on top of the form(Jsp1) and not in a different window,i.e it should be invisible at first and only when user hits 'Show' on Jsp1 T1 should be seen.

Can this perhaps be achieved by using <div> ?
I am not much familiar with DOM and Javascript so any suggestions regarding this would be very helpful.
You can give a table body tag an id (I'm not sure about giving a table an id) and then use document.getElementById('id').style = "display:none";
Jan 23 '07 #2

iam_clint
Expert 100+
P: 1,208
yes you can give the table itself an id and do the same.
Jan 23 '07 #3

10K+
P: 13,264
yes you can give the table itself an id and do the same.
Thanks Clint. That will come handy some time
Jan 23 '07 #4

100+
P: 157
Thanks r0 and Clint for the info, but the thing is that the entire form that you can see is itself fitted into a table; the page layout is something like this:-

<html>
<body>
<form>
<table>

This is the main table(say T)
---- The entire page is adjusted inside T, i.e all the Html objects--Labels,Textboxes, Radio buttons,Dropdown etc are adjusted into the rows and columns of the table ---

</table>
</form>
</body>
</html>

Now the other table T1 is directly linked to the database table,all the entries that are in T1 are actually records;that is basically I'm constructing table T1 dynamically at page-load hence its size may vary depending on number of records in the backend table..and my requirement is that although T1 is already there somewhere on the page but only when a user clicks 'Show' it should appear(become visible) on top(front) of the form, i.e I need something like I've shown in snapshot3..then there are links on the names and as the user clicks on any link the data for that name must appear in the correspoding textboxes of the form..

Well I think I can handle the link part but for now I dont really know how I can make the table sort of appear like floating on top of the form ..not even sure if that is possible..
Attached Images
File Type: gif snapshot3.gif (9.3 KB, 660 views)
Jan 24 '07 #5

10K+
P: 13,264
Thanks r0 and Clint for the info, but the thing is that the entire form that you can see is itself fitted into a table; the page layout is something like this:-

<html>
<body>
<form>
<table>

This is the main table(say T)
---- The entire page is adjusted inside T, i.e all the Html objects--Labels,Textboxes, Radio buttons,Dropdown etc are adjusted into the rows and columns of the table ---

</table>
</form>
</body>
</html>

Now the other table T1 is directly linked to the database table,all the entries that are in T1 are actually records;that is basically I'm constructing table T1 dynamically at page-load hence its size may vary depending on number of records in the backend table..and my requirement is that although T1 is already there somewhere on the page but only when a user clicks 'Show' it should appear(become visible) on top(front) of the form, i.e I need something like I've shown in snapshot3..then there are links on the names and as the user clicks on any link the data for that name must appear in the correspoding textboxes of the form..

Well I think I can handle the link part but for now I dont really know how I can make the table sort of appear like floating on top of the form ..not even sure if that is possible..
Something like this?
Jan 24 '07 #6

10K+
P: 13,264
There is also a script here
Jan 24 '07 #7

100+
P: 157
There is also a script here
Hey r0,Thanks a bunch for these 2 links..I think this is it!

Although I've to customize this code to suit my requirement but atleast I'm not as clueless as I was a while ago..Thanks again :)
Jan 24 '07 #8

100+
P: 157
Helo again,

This is how my page looks right now..but a slight prob again, can anyone suggest to me how we can make a scrollable floating table?
Attached Images
File Type: jpg snapshot4.jpg (6.0 KB, 1310 views)
Jan 25 '07 #9

iam_clint
Expert 100+
P: 1,208

100+
P: 157
http://www.w3schools.com/css/pr_pos_overflow.asp

check out this link
Thanks Clint,I did check out the link, ..and tried to implement the code they have there in my program..but doesn't work..I think I am going wrong with the syntax. Its a dynamically created table and the Jsp is populating it i.e appending the records one by one from the backend table to the Html table !

My code is as below(Jsp),can anyone please check :-

Expand|Select|Wrap|Line Numbers
  1. <%
  2. out.write("<html>\r\n");
  3. out.write("<head>\r\n");
  4. out.write("<style type=text/css>table.T1 {overflow: scroll}</style>");
  5. out.write("<layer id = divStayTopLeft>");
  6. out.write("<div align = right>");
  7. out.write("<table class = T1 align = right border = 1 width=450 cellspacing = 0 cellpadding = 0 >");
  8. out.write("<tr><td bgcolor=#FFFFCC><b>Candidate Name</b></td>");
  9. out.write("<td bgcolor=#FFFFCC><b>Batch-ID</b></td>");
  10. out.write("<td bgcolor=#FFFFCC><b>Reg Amt</b></td>");    
  11. out.write("<td bgcolor=#FFFFCC><b>Total Fees </b></td>");
  12. out.write("<td bgcolor=#FFFFCC><b>Balance</b></td></tr>");    
  13.  
  14. // Here I have the code for getting the backend record and appending it to the Html table as a new row.
  15.  
  16. out.write("</table>");
  17. out.write("</div>");
  18. out.write("</layer>");
  19. out.write("</head>");
  20. out.write("</html>");        
  21. %>
  22.  
So this is how my table is created but the thing is that no matter if the content inside the table overflows or not I still want the scroll bars, can it be possible?
Jan 26 '07 #11

iam_clint
Expert 100+
P: 1,208
i'm sorry but i'm not 100% sure about always having scroll bars in things like this hopefully someone will give you a better understanding on it.
Jan 26 '07 #12

acoder
Expert Mod 15k+
P: 16,027
You shouldn't really try to alter the default browser behaviour, if possible.

Try putting your table in a div, and setting overflow to scroll on that. There are some hacks involving setting the height of something to just larger than the view.
Jan 27 '07 #13

100+
P: 157
You shouldn't really try to alter the default browser behaviour, if possible.

Try putting your table in a div, and setting overflow to scroll on that. There are some hacks involving setting the height of something to just larger than the view.
Thanks for your reply acoder

I had posted this query here in the CSS forum and I did manage to make my table scrollable with the help of the response I received there but now not really sure how to achieve the floating-effect for this table!
Jan 28 '07 #14

Expert 100+
P: 392
It sounds like what you really want is an IFRAME. if you include an IFRAME in JSP. Then use JavaScript to set the source of of the IFRAME tag to be JSP2.

Then JSP2 will load in the iFrame. You can use CSS to set the size and posistion of the IFRAME.
Jan 28 '07 #15

100+
P: 157
It sounds like what you really want is an IFRAME. if you include an IFRAME in JSP. Then use JavaScript to set the source of of the IFRAME tag to be JSP2.

Then JSP2 will load in the iFrame. You can use CSS to set the size and posistion of the IFRAME.
Thanks a bunch pronerd, I used an iframe and used <layer> to give that iframe a floating effect, its working!

I have a doubt with 2 more things if anyone can help with this:-

1)I have a button ‘Show’ on my main page(Jsp1).
On page load the iframe is invisible(ie :- style.display=’none’) and on clicking ‘Show’ I invoke a JS function which makes the iframe visible(style.display=’’) and at the same time I make the value of the ‘Show’ button change to ‘Hide’ in the same function ..

Now again when the user clicks this button(‘Hide’) the iframe should become invisible and the value of the button should become 'Show' ..well the first part is working properly but after clicking on ‘Hide’ the iframe is still visible and the button's value is still 'Hide' , and I don’t want to use two different buttons for showing and hiding, I would like to achieve that with one button if possible

2)On clicking a link like say if I click ‘Mr.Jack Brown’ I need that the info of ‘Jack Brown’ be populated into the corresponding fields i.e in Student Name-textbox it should show ‘Mr.JackBrown’ , in Batch ID-textbox it should show 1 etc .

For creating the dynamic table inside the iframe that we see on Jsp1 I've used another Jsp(Jsp2) :-
Expand|Select|Wrap|Line Numbers
  1. <iframe id = "I1" src="Jsp2.jsp" width=320 scrolling="yes">
Is it possible that I can actually pass data from the table seen in the iframe to the elements of the parent window?

Any suggestions folks?
Attached Images
File Type: jpg image001.jpg (13.9 KB, 949 views)
Jan 29 '07 #16

acoder
Expert Mod 15k+
P: 16,027
Thanks a bunch pronerd, I used an iframe and used <layer> to give that iframe a floating effect, its working!
You shouldn't use the layer tag, use div instead. It should still work.

1)I have a button ‘Show’ on my main page(Jsp1).
On page load the iframe is invisible(ie :- style.display=’none’) and on clicking ‘Show’ I invoke a JS function which makes the iframe visible(style.display=’’) and at the same time I make the value of the ‘Show’ button change to ‘Hide’ in the same function ..

Now again when the user clicks this button(‘Hide’) the iframe should become invisible and the value of the button should become 'Show' ..well the first part is working properly but after clicking on ‘Hide’ the iframe is still visible and the button's value is still 'Hide' , and I don’t want to use two different buttons for showing and hiding, I would like to achieve that with one button if possible
Show your code. It'll probably be a typo. Have you got any error messages? Are you passing some value to the function that differentiates between show and hide?
Jan 29 '07 #17

100+
P: 157
You shouldn't use the layer tag, use div instead. It should still work.


Show your code. It'll probably be a typo. Have you got any error messages? Are you passing some value to the function that differentiates between show and hide?
Thanks acoder, I replaced the <layer> tag with <div>, its working fine, is there any particular reason that <div> is preferred over <layer>?

This is the JS function invoked on the onClick() event of ‘Show’ button and ‘I1’ is the id of the the iframe.
Expand|Select|Wrap|Line Numbers
  1. function Show(t)
  2. {
  3.     if (t.value = "Show")
  4.     {            
  5.           document.getElementById("I1").style.display = '' ;
  6.           t.value = "Hide";
  7.     }
  8.     else
  9.     {     
  10.          document.getElementById("I1").style.display = 'none' ;
  11.          t.value = "Show";
  12.     }
  13. }
The else part doesnt work at all. Any corrections?
Jan 29 '07 #18

10K+
P: 13,264
Thanks acoder, I replaced the <layer> tag with <div>, its working fine, is there any particular reason that <div> is preferred over <layer>?

This is the JS function invoked on the onClick() event of ‘Show’ button and ‘I1’ is the id of the the iframe.
Expand|Select|Wrap|Line Numbers
  1. function Show(t)
  2. {
  3.     if (t.value = "Show")
  4.     {            
  5.           document.getElementById("I1").style.display = '' ;
  6.           t.value = "Hide";
  7.     }
  8.     else
  9.     {     
  10.          document.getElementById("I1").style.display = 'none' ;
  11.          t.value = "Show";
  12.     }
  13. }
The else part doesnt work at all. Any corrections?
else part won't work like that. Is that not supposed to be
Expand|Select|Wrap|Line Numbers
  1. if (t.value == "Show")
instead of
Expand|Select|Wrap|Line Numbers
  1.  if (t.value = "Show") 
Jan 29 '07 #19

100+
P: 157
else part won't work like that. Is that not supposed to be
Expand|Select|Wrap|Line Numbers
  1. if (t.value == "Show")
instead of
Expand|Select|Wrap|Line Numbers
  1.  if (t.value = "Show") 
Yes it is.........gosh I'm so embarrassed ...Thanks r0!
Jan 29 '07 #20

acoder
Expert Mod 15k+
P: 16,027
Thanks acoder, I replaced the <layer> tag with <div>, its working fine, is there any particular reason that <div> is preferred over <layer>?
<div> is the standard, whilst <layer> is a proprietary tag introduced in Netscape and not supported by other browsers.
Jan 29 '07 #21

100+
P: 157
<div> is the standard, whilst <layer> is a proprietary tag introduced in Netscape and not supported by other browsers.
Oh Ok..Thanks for that info acoder !
Jan 29 '07 #22

Post your reply

Sign in to post your reply or Sign up for a free account.