problem happends when in loading a new .jsp page. The problem being that it doesn’t load, as topic says, scripts or pictures.
my index.jsp
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="js/dataManager.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="first">
<div data-role="header">
<a href="#" data-rel="back" data-role="button" ><img align="middle"src="images/back.png" alt="beskeder" vspace="2"/></a>
<h1><img onclick="getStuff('/product/5')" align="middle"src="images/main_header.png" alt="beskeder" vspace="2"/></h1>
</div><!-- /header -->
<div data-role="content" id="firstPageContent">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#second">second</a></p>
<a href="pages/mapMode.jsp" id="mapLink" name="mapLink"><img id="mapLinkImage" alt="a map which links to the mapPage" src="images/beskeder.png"/></a>
<Button text="menuLoader.load" id="loadButton" name="loadButton" onClick="load()">menuLoader.load</button>
<Button text="dataManager.addPicture" name="addPictureButton" id="addPictureButton" onClick="addPicture('firstPageContent')">dataManager.addPicture</button>
<Button text="dataManager.reset" name="reset" id="reset" onClick="resetPageContent('firstPageContent')">dataManager.resetPageContent</button>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
When I press the mapLink button, then I hit the desired jsp page, but it just doesn’t load any pictures, and the buttons onclick functions doesn’t work.
here is the code for the mapMode.jsp (almost identical to index.jsp):
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="js/dataManager.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode">
<div data-role="header">
<a href="#" data-rel="back" data-role="button" ><img align="middle"src="images/back.png" alt="back" vspace="2"/></a>
<h1><img onclick="getStuff('/product/5')" align="middle"src="images/main_header.png" alt="logo" vspace="2"/></h1>
</div><!-- /header -->
<div data-role="content" id="mapmodePageContent">
<p>I'm the first page in mapMode!.</p>
<Button text="dataManager.addPicture" name="addPictureButton" id="addPictureButton" onClick="addPicture('mapmodePageContent')">dataManager.addPicture</button>
<Button text="dataManager.reset" name="reset" id="reset" onClick="resetPageContent('firstPageContent')">dataManager.resetPageContent</button>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
If you put your js in a subfolder remember to add “../” infront of your picture location… stupid me