javascript problems when generating html reports from within java
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>
I executed your methods and this resulted (formatting not included :D):
<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>
It works just fine on IE 8 and Firefox 3.6.
Do you have JavaScript disabled in your browser or some security restrictions that cut your scripts from running?
EDIT: Based on the code you posted, the problem seems to be this:
<!--function HideContent(d) {
If you write it like this it works:
<!--
function HideContent(d) {
A few tips:
Since the JavaScript block you generate with
addShowHideScript()is static, I'd suggest not to write it to every page, but put in a separate file in include it with<script type="text/javascript" src="yourScript.js"></script>.You can drop
language="JavaScript". Its obsolete and unnecessary.Don't "comment out" your Javascript with HTML comments (
<!-- ... -->). That's also obsolete and unnecessary.It's customary to let the name of JavaScript functions start with a small letter.
It looks right to me from what I can tell, as long as your IDs are unique in the html code.
You might want to try using firebug (firefox plugin), it's a great javascript debugging tool.
加载中,请稍侯......
精彩评论