I've used Spring Roo to generate a basic web project. The UI is JSP based, with a Tiles layout. Looking at the default layout code, I noticed that tags were defined as follows:
<script src="${dojo_url}" type="text/javascript" ><!-- //required for FF3 and Opera --></script>
<script src="${spring_url}" type="text/javascript"><!-- //required for FF3 and Opera --></script>
<script src="${spring_dojo_url}" type="text/javascript"><!-- //required for FF3 and Opera --></script>
If I take out the comments between the script tags, the resulting HTML in Firefox contains the first tag but not the others. If I put the comments back in the resulting HTML is correct.
My question is: Why is this the behavior?
The (documentation) for the script tag doesn't mention that it needs to include any sort of data content. Is this a browser issue (as implied by the comment) or is it a JSP or Spring issue?
Returned HTML and browser output
cURL results look the same regardless of comments being there or not:
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<link href="/student-cloud-app/static/styles/login.css;jsessionid=FFED09C524087878AEF09142A6A6F375" media="screen" type="text/css" rel="stylesheet" />
<link href="/student-cloud-app/static/images/favicon.ico;jsessionid=FFED09C524087878AEF09142A6A6F375" rel="SHORTCUT ICON" />
<script type="text/javascript" src="/student-cloud-app/resources/dojo/dojo.js;jsessionid=FFED09C524087878AEF09142A6A6F375"></script>
<script type="text/javascript" src="/student-cloud-app/resources/spring/Spring.js;jsessionid=FFED09C524087878AEF09142A6A6F375"></script>
<script type="text/javascript" src="/student-cloud-app/resources/spring/Spring-Dojo.js;jsessionid=FFED09C524087878AEF09142A6A6F375"></script>
<title>
Sample App
</title>
</head>
In fact, doing a View Source from Firefox looks the same whether the comments are there or not:
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<link href="/student-cloud-app/static/styles/login.css" media="screen" type="text/css" rel="stylesheet" />
<link href="/student-cloud-app/static/images/favicon.ico" rel="SHORTCUT ICON" />
<script type="text/javascript" src="/student-cloud-app/resources/dojo/dojo.js"></script>
<script type="text/javascript" src="/student-cloud-app/resources/spring/Spring.js"></script>
<script type="text/javascript" src="/student-cloud-app/resources/spring/Spring-Dojo.js"></script>
<title>
Sample App
</title>
</head>
But if I turn on Firebug and examine the HTML tree, with comments removed there is a single script element and it contains an error message:
Failed to load source for: http://localhost:8080/student-cloud-app/resources/dojo/dojo.js
and I get the blank page instead of a login form. If I put the comments back in, Firebug reports all the script tags, no errors, and the page displays the login form. Disabling Firebug has no effect on whether or not the page renders correctly; no comments = blank page, comments = correctly rendered page.
Update: The actual tags that were being returned were self-closing. HTML tidy was fixing that issue. The self-closing script tag is what was actually causing the problem.
Update 2: Example HTML Here is HTML with properly closed script tags that works in a browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="Content-Type" />
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<link href="/student-cloud-app/static/styles/login.css"
media="screen" type="text/css" rel="stylesheet" />
<link href="/student-cloud-app/static/images/favicon.ico"
rel="SHORTCUT ICON" />
<script type="text/javascript" src="/static/scripts/ajax.js"></script>
<script type="text/javascript" src="/static/scripts/jquery-1.4.2.min.js"></script>
<title>Student Cloud</title>
</head>
<body>
<div id="container">
<form method="POST"
action="/student-cloud-app/static/j_spring_security_check"
name="f">
<table align="center" class="table">
<tr>
<td>
<label for="j_username">User name:</label>
</td>
<td>
<input name="j_username" type="text"
id="j_username" />
</td>
</tr>
<tr>
<td>
<label for="j_password">Password:</label>
</td>
<td>
<input name="j_password" type="password"
id="j_password" />
</td>
</tr>
<tr>
<td class="login_button" colspan="2">
<input value="Login" type="submit" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is the exact same HTML, except with self-closing script tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="Content-Type" />
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<link href="/student-cloud-app/static/styles/login.css"
media="screen" type="text/css" rel="stylesheet" />
<link href="/student-cloud-app/static/images/favicon.ico"
rel="SHORTCUT ICON" />
<script type="text/javascript" src="/static/scripts/ajax.js" />
<script type="text/javascript" src="/static/scripts/jquery-1.4.2.min.js" />
<title>Student Cloud</title>
</head>
<body>
<div id="container">
<form method="POST"
action="/student-cloud-app/static/j_spring_security_check"
name="f">
<table align="center" class="table">
<tr>
<td>
<label for="j_username">User name:</label>
</td>
<td>
<input name="j_username" type="text"
id="j_username" />
</td>
</tr>
<tr>
<td>
<label for="j_password">Password:</label>
</td>
<td>
<input name="j_password" type="password"
id="j_password" />
</td>
</tr>
<tr>
<td class="login_button" colspan="2">
<input value="Login" type="submit" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Saved as .html files, the first example displays correctly in a browser, the second does not.