Hi,
I have been working on a Java project in which the reports will be generated in HTML, so I am implementing methods for creating these reports. One important functionality is to be able to have as much info as possible in the tables, but still not clutter too much. In other words the details should be available if the user wishes to take a look at them but not necessarily visible by default.
I have done some searching and testing and found an interesting template for hiding/showing content with the use of CSS and javascript, the problem is that when I try the resultant html page the scripts dont work. I am not sure if it's due a problem in Java or in the javascript itself. I have compared the html code that java produces to the source where I found the template, they seem to match pretty well.
Below are bits of my java code that generates the javascript and the content, i would greatly appreciate if anyone can point out the possible reasons for this problem:
//goes to head
private void addShowHideScript() throws IOException{
StringBuilder sb = new StringBuilder();
sb.append("<script type=\"text/javascript\" language=\"JavaScript\">\n");
sb.append("<!--function HideContent(d) {\n");
sb.append("document.getElementById(d).style.display=\"none\";}\n");
sb.append("function ShowContent(d) {\n");
sb.append("document.getElementById(d).style.display=\"block\";}\n");
sb.append("function ReverseDisplay(d) {\n");
sb.append("if(document.getElementById(d).style.display==\"none\")\n");
sb.append("{ document.getElementById(d).style.display=\"block\"; }\n");
sb.append("else { document.getElementById(d).style.display=\"none\"; }\n}\n");
sb.append("//--></script>\n");
out.write(sb.toString());
out.newLine();
}
// body
private String linkShowHideContent(String pathname, String divname){
StringBuilder sb = new StringBuilder();
sb.append("<a href=\"javascript:ReverseDisplay('");
sb.append(divname);
sb.append("')\">");
sb.append(pathname);
sb.append("</a>");
return sb.toString();
}
// content
out.write(linkShowHideContent("hidden content", "ex"));
out.write("<div id=\"ex\" style=\"display:block;\">");
out.write("<p>Content goes here.</p></div>");
Update // a chunk of the html code from the page that reflects the problem
<html><head><style type="text/css">
#table {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:75%;border-collapse:collapse;}
#table td, #table th {font-size:1em;border:1px solid #98bf21;padding:5px 8px 5px 10px;}
#table th {font-size:1.2em;text-align:left;padding-top:5px;padding-bottom:4px;background-color:#A7C942;color:#fff;}
#table tr.alt td {color:#000;background-color:#EAF2D3;}
</style></head><body>
<h2> QUERY RESULTS </h2>
<script type="text/javascript" language="javascript">
<!--function HideContent(d) {
document.getElementById(d).style.display="none";}
function ShowContent(d) {
document.getElementById(d).style.display="block";}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display=="none")
{ document.getElementById(d).style.display="block"; }
else { document.getElementById(d).style.display="none"; }
}
//--></script>
<a href="javascript:ReverseDisplay('ex')">hidden content</a>
<div id="ex" style="display:block;">
<p>Content goes here.</p></div>