It's because all your CSS/JS resources are referenced using a folder-relative URI.
For example, those two
<link href="styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
will actually be downloaded from
http://localhost:8080/contextpath/styles/menu.css http://localhost:8080/contextpath/js/jquery-1.8.3.min.js
when you open page1.xhtml
.
However, when you open folder/page2.xhtml
, the browser will attempt to download them from
http://localhost:8080/contextpath/folder/styles/menu.css http://localhost:8080/contextpath/folder/js/jquery-1.8.3.min.js
which apparently don't exist at all. You should have noticed this mistake by just looking at the HTTP traffic monitor in browser's web developer toolset (press F12 in Chrome/Firefox>=23/IE>=9 and check Network tab).
You basically need to make those URLs domain-relative, i.e. start with a leading slash:
<link href="/contextpath/styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/contextpath/js/jquery-1.8.3.min.js"></script>
or if you worry about the dynamicness of the context path:
<link href="#{request.contextPath}/styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="#{request.contextPath}/js/jquery-1.8.3.min.js"></script>
but, much better, and actually the canonical JSF way, is to put all those files in /resources
folder and reference them as JSF resources using <h:outputStylesheet>
and <h:outputScript>
according the instructions in the answer to: How to reference CSS / JS / image resource in Facelets template?
<h:outputStylesheet name="styles/menu.css" />
<h:outputScript name="js/jquery-1.8.3.min.js" />
This way JSF will automatically worry about generating the right URL.
Unrelated to the concrete problem: that manually included jQuery JS file is recipe for trouble given that you're using PrimeFaces. See also the answer to Adding jQuery to PrimeFaces results in Uncaught TypeError over all place.