I have a main page that link to a secondary page. In this secondary page I would like to load a dynamic content inside a div (#main). The first problem was binding to the pageshow event, because sometimes it would not fire or it would fire more than one time. I have fixed that issue using the .one function and moving the script inside the page DIV.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>GS Link Mobile App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role="page" id="newsPage">
<script type="text/javascript">
$("#newsPage").one('pageshow', function () {
alert($("#main").html());
/*$("#main").load('dynamic/news.cshtml', function (response, status, xhr) {
alert(xhr.status + " " + xhr.statusText);
});*/
$("#main").html('new content');
alert('done');
});
</script>
<div data-role="header" data-position="fixed" data-theme="b">
<a href="index.html" data-role="button" data-icon="home" data-transition="none">Home</a>
<h1>News</h1>
</div>
<div data-role="content">
<div id="main" style="border:1px solid #000">
</div>
</div>
<div data-role="footer" data-theme="c" data-position="fixed" class="mainFooter">
<p>
Copyright 2012-2013 GS Link<br />
</p>
</div>
</div>
</body>
</html>
The first time I visit the page I can see the alerts and the content is change accordingly. The second time I visit this page (return home and the return to the page) I see the alerts but I don't see the content. The content remains unchanged (empty).