PDA

View Full Version : JSP Not Rendering CSS When passed to from Servlet

shelzmike
03-07-2009, 07:03 AM
Okay, I will try to explain this intelligently, even though I am a complete greenhorn when it comes to jsp and servlets.

I am working on a school assignment. I have a referral form that someone is supposed to fill in with a few pieces of information. This is then passed to a servlet (this is using an MVC setup), which then passes the properties to one of a few jsp pages.

The part of the assignment that I need to accomplish is done - the properties pass over correctly and the MVC set up works. However, the problem I am getting is very weird.

Here is the series:

referall.jsp submits to scoutReferral servlet. This servlet then responds with a confirm.jsp page that lists the entries for the person to confirm (I know this is not the best way, but the point here is just to get the MVC to work properly).

Well, the confirm.jsp has two css style sheets attached. However, when it displays using this method, the css does not render at all.

Now, what is weird is that if I go directly to the jsp, it not only renders the css properly, it still has the session variables there.

I have checked the source that is getting passed to the browser and it all looks perfect.

What am I missing here?

Here is the link: http://www.paradigmforward.com/pack111/referral.jsp

(Once you fill the form out and see the result using that method, the direct link to the confirm.jsp is http://www.paradigmforward.com/pack111/confirm.jsp)

If you use IE - I know the table is messed up, but I will fix that later.

Here is the code:

referral.jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/scoutTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Welcome to Pack 111</title>
<!-- InstanceEndEditable -->
<link href="pack111/css/scouts.css" rel="stylesheet" type="text/css" />
<link href="pack111/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="pack111/js/script.js"></script>
<script src="pack111/js/SpryMenuBar.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>
<div id="wrapper">
<div id="header"><h1><span>Cub Scout Pack 111 - Rocky Mount, Virginia</span></h1><img src="pack111/img/header.png" width="960" height="220" alt="Pack 111 - Rocky Mount, Virginia - Blue Ridge Mountains Council" /></div><!--header-->
<div id="innerwrapper">
<div id="nav">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="pack111/index.html">Home</a> </li>
<li><a href="pack111/html/about-cs.html" class="MenuBarItemSubmenu">About Cub Scouts</a>
<ul>
<li><a href="pack111/html/cs-basics.html">Cub Scout Basics</a></li>
<li><a href="pack111/html/badge-placement.html">Uniform Badge Placement</a></li>
<li><a href="pack111/html/sports-academics.html">Academics &amp; Sports Program </a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="pack111/html/tigers.html">Pack 111 Dens</a>
<ul>
<li><a href="pack111/html/tigers.html">Tiger Cubs</a> </li>
<li><a href="pack111/html/wolves.html">Wolf Cubs</a></li>
<li><a href="pack111/html/bears.html">Bear Cubs</a></li>
<li><a href="pack111/html/webelos.html">Webelos</a></li>
</ul>
</li>
<li><a href="pack111/html/leaders.html" class="MenuBarItemSubmenu">Leaders &amp; Volunteers</a>
<ul>
<li><a href="pack111/html/leader-training.html">Leader Training</a></li>
<li><a href="pack111/html/talent-survey.html">Talent Survey</a></li>
</ul>
</li>
<li><a href="pack111/html/join.html">Join Scouting</a></li>
<li><a href="pack111/html/support-scouting.html">Support Scouting</a></li>
<li><a href="pack111/html/duty.html">Duty to God</a></li>
<li><a href="pack111/html/links.html">Links</a></li>
<li><a href="pack111/html/contact.html">Contact Us</a></li>
<li><a href="pack111/html/calendar.html">Calendar of Events</a></li>
</ul>

</div><!--nav-->
<!-- InstanceBeginEditable name="contentEditableRegion" -->
<div id="content"><h2>Refer a Scout!</h2>
<p>If you know of a child or a parent interested in finding out more about scouting, please fill in the short form below. You will be asked to confirm your entries before you make the submission final! Thanks for your support!</p>
<form id="referral" method="get" action="/servlet/referral/confirm">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="rtAlign" width="50%">Your Name:</td>
<td width="50%"><input name="name" type="text" size="25" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Your Email Address:</td>
<td width="50%"><input name="senderEmail" type="text" size="25" /></td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td class="rtAlign" width="50%">Child's Name</td>
<td width="50%"><input name="childName" type="text" size="25" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Parent's Name:</td>
<td width="50%"><input name="parentName" type="text" size="25" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Parent's Email Address:</td>
<td width="50%"><input name="parentEmail" type="text" size="25" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Home Phone Number:</td>
<td width="50%"><input name="phone" type="text" size="25" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</table>

</form>
</div>
<!-- InstanceEndEditable -->
<!--content-->
<br class="clearfloat" />
<div id="footer">
<div id="footerLeft">All Rights Reserved ©2009 ParadigmForward | Pack 111 | BSA</div>
<div id="footerRight"><a href="http://validator.w3.org/check/referer" style="background-color: transparent"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" width="88" height="31" /></a>
&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer" style="background-color: transparent"><img width="88" height="31" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
<br />Page Last Updated:
</div>
</div><!--footer-->
</div> <!--wrapper-->
</div><!--innerwrapper-->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>




confirm.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/scoutTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Welcome to Pack 111</title>
<!-- InstanceEndEditable -->
<link href="pack111/css/scouts.css" rel="stylesheet" type="text/css" />
<link href="pack111/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="pack111/js/script.js"></script>
<script src="pack111/js/SpryMenuBar.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>
<div id="wrapper">
<div id="header"><h1><span>Cub Scout Pack 111 - Rocky Mount, Virginia</span></h1><img src="pack111/img/header.png" width="960" height="220" alt="Pack 111 - Rocky Mount, Virginia - Blue Ridge Mountains Council" /></div><!--header-->
<div id="innerwrapper">
<div id="nav">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="pack111/index.html">Home</a> </li>
<li><a href="pack111/html/about-cs.html" class="MenuBarItemSubmenu">About Cub Scouts</a>
<ul>
<li><a href="pack111/html/cs-basics.html">Cub Scout Basics</a></li>
<li><a href="pack111/html/badge-placement.html">Uniform Badge Placement</a></li>
<li><a href="pack111/html/sports-academics.html">Academics &amp; Sports Program </a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="pack111/html/tigers.html">Pack 111 Dens</a>
<ul>
<li><a href="pack111/html/tigers.html">Tiger Cubs</a> </li>
<li><a href="pack111/html/wolves.html">Wolf Cubs</a></li>
<li><a href="pack111/html/bears.html">Bear Cubs</a></li>
<li><a href="pack111/html/webelos.html">Webelos</a></li>
</ul>
</li>
<li><a href="pack111/html/leaders.html" class="MenuBarItemSubmenu">Leaders &amp; Volunteers</a>
<ul>
<li><a href="pack111/html/leader-training.html">Leader Training</a></li>
<li><a href="pack111/html/talent-survey.html">Talent Survey</a></li>
</ul>
</li>
<li><a href="pack111/html/join.html">Join Scouting</a></li>
<li><a href="pack111/html/support-scouting.html">Support Scouting</a></li>
<li><a href="pack111/html/duty.html">Duty to God</a></li>
<li><a href="pack111/html/links.html">Links</a></li>
<li><a href="pack111/html/contact.html">Contact Us</a></li>
<li><a href="pack111/html/calendar.html">Calendar of Events</a></li>
</ul>

</div><!--nav-->
<!-- InstanceBeginEditable name="contentEditableRegion" -->
<jsp:useBean id="person" class="scoutReferral.PersonBean" scope="session" /><div id="content"><h2>Wait! Please Confirm!</h2>
<p><span class="centerPara">Before you go, please confirm that the folling informaiton is correct. If it is, please click the Correct Button Below. If it is not correct, please go back using your browser's back button and correct the information. Thanks again!</span>
</p>
<p>&nbsp;</p>
<table id="confirm" width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="rtAlign" width="50%">Your Name:</td>
<td width="50%"><jsp:getProperty name="person" property="name" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Your Email Address:</td>
<td width="50%"><jsp:getProperty name="person" property="senderEmail" /></td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td class="rtAlign" width="50%">Child's Name</td>
<td width="50%"><jsp:getProperty name="person" property="childName" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Parent's Name:</td>
<td width="50%"><jsp:getProperty name="person" property="parentName" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Parent's Email Address:</td>
<td width="50%"><jsp:getProperty name="person" property="parentEmail" /></td>
</tr>
<tr>
<td class="rtAlign" width="50%">Home Phone Number:</td>
<td width="50%"><jsp:getProperty name="person" property="phone" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Correct" onclick="window.location='success'"/></td>
</tr>
</table>

</div>
<!-- InstanceEndEditable -->
<!--content-->
<br class="clearfloat" />
<div id="footer">
<div id="footerLeft">All Rights Reserved ©2009 ParadigmForward | Pack 111 | BSA</div>
<div id="footerRight"><a href="http://validator.w3.org/check/referer" style="background-color: transparent"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" width="88" height="31" /></a>
&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer" style="background-color: transparent"><img width="88" height="31" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
<br />Page Last Updated:
</div>
</div><!--footer-->
</div> <!--wrapper-->
</div><!--innerwrapper-->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>


Thanks!

Mike
riwan
03-09-2009, 05:23 AM
Try changing code like this


<link href="pack111/css/scouts.css" rel="stylesheet" type="text/css" />
<link href="pack111/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />


into this


<link href="http://www.paradigmforward.com/pack111/css/scouts.css" rel="stylesheet" type="text/css" />
<link href="http://www.paradigmforward.com/pack111/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />


or


<link href="/pack111/css/scouts.css" rel="stylesheet" type="text/css" />
<link href="/pack111/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />