Response title
This is preview!
page refresh, hash and dynamic pages
in jQuery Mobile
•
11 years ago
I want to understand more on what is going on with the hash when a page is refreshed or linked to from an external site. Here is a simple example .
e.g. the url www.site.com/page.html#test
Scenario 1 - if #test is static in the page
This shows up correctly.
Scenario 2 - #test is added to the page dynamically after display
How can i stop the above error message happening in this scenario ?
Thanks
Symeon
e.g. the url www.site.com/page.html#test
Scenario 1 - if #test is static in the page
- <!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="css/mobile.css" />
<script src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.js"></script>
</head>
<body>
<div id="home" data-role="page" >
<div data-role="content">
<a href="#test" data-role="button">test link</a>
</div>
</div>
<div data-url="test" id="test" data-role="page" >hello world</div>
</body>
</html>
This shows up correctly.
Scenario 2 - #test is added to the page dynamically after display
- <!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="css/mobile.css" />
<script src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("#test") > -1) {
gettest();
}
});
function gettest(){
$('body').append('<div data-url="test" id="test" data-role="page" >hello world</div>');
$("#test").page();
$.mobile.changePage("#test", "slide", false, true);
}
</script>
</head>
<body>
<div id="home" data-role="page" >
<div data-role="content">
<a href="" onclick="gettest()" data-role="button">test link</a>
</div>
</div>
</body>
</html>
How can i stop the above error message happening in this scenario ?
Thanks
Symeon
1