I have two jquery mobile ui based html files,
file “1.html” and “2.html”
I am doing simple slide transition from 1.html to 2.html
I am making some http post request in 2.html file, after transition , it’s not executing any js code in 2.html.
1.html
<!DOCTYPE html>
<!--
Design by mRova Solutions
http://www.mrova.com
Released for free under a Creative Commons Attribution 2.5 License
-->
<html>
<head>
<title>O9 ShopAlot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css1/style.css" />
<link rel="stylesheet" href="css1/photoswipe.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js1/klass.min.js"></script>
<script type="text/javascript" src="js1/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="js1/custom.js"></script>
<script type="text/javascript">
function openBrands(id)
{
//open next page by slide effect
//window.open("brand.html");
alert(id);
$.ajax({
type: "get",
url: "InterestJ",
data: "id=" + id,
success: function(data) {
alert(id+" Data Session Attribute Set");
/*
data=JSON.parse(data);
//alert($("#listID").innerHTML);
//alert(document.getElementById("listID").innerHTML);
var setHTML = '';
for( i in data)
{
if(i>0&&i!=data.length-1)
{
//ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)"; >'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'
}
else if(i!=data.length-1){
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';
}else
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';
//alert(data[i].id);
//alert(data[i].interest);
}
document.getElementById("listID").innerHTML=setHTML;
*/
}
});
}
function loadInterest(){
$.ajax({
type: "post",
url: "InterestJ",
//data: "term=" + term,
success: function(data) {
data=JSON.parse(data);
//alert($("#listID").innerHTML);
//alert(document.getElementById("listID").innerHTML);
var setHTML = '';
for( i in data)
{
if(i>0&&i!=data.length-1)
{
//ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brandMobile.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)"; >'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'
}
else if(i!=data.length-1){
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brandMobile.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';
}
else
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brandMobile.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';
//alert(data[i].id);
//alert(data[i].interest);
}
document.getElementById("listID").innerHTML=setHTML;
}
});
}
</script>
</head>
<body onload="loadInterest()">
<div data-role="page" >
<div data-role="header" id="header">
<h1>Mobile Template</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a" id="listID">
</ul>
<p class="copyright">Copyright © mobi. Designed by <a href="http://mrova.com" class="ui-link">mRova</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<div class="ui-bar">
<a href="share-dialog.html" data-role="button" data-icon="star" data-theme="a" data-rel="dialog">Share</a>
<a href="contact.html" data-role="button" data-icon="plus" data-theme="a">Contact</a>
<a href="" data-role="button" data-icon="arrow-u" data-theme="a" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
</div>
</body>
</html>
2.html
<!DOCTYPE html>
<!--
Design by mRova Solutions
http://www.mrova.com
Released for free under a Creative Commons Attribution 2.5 License
-->
<html>
<head>
<title>O9 ShopAlot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css1/style.css" />
<link rel="stylesheet" href="css1/photoswipe.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js1/klass.min.js"></script>
<script type="text/javascript" src="js1/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="js1/custom.js"></script>
<script type="text/javascript"><!--
function loadBrand(){
$.ajax({
type: "post",
url: "BrandJ",
//data: "term=" + term,
success: function(data) {
//data=JSON.parse(data);
//alert($("#listID").innerHTML);
//alert(document.getElementById("listID").innerHTML);
alert(data+" session object get");
//var setHTML = '';
/* for( i in data)
{
if(i>0&&i!=data.length-1)
{
//ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" >'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'
}
else if(i!=data.length-1){
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" >'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';
}else
setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text"> <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" >'+data[i].interest+'</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';
//alert(data[i].id);
//alert(data[i].interest);
} */
//document.getElementById("listID").innerHTML=setHTML;
}
});
}
--></script>
<script>
$('page').live('branMobile.html',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
</script>
</head>
<body onload=loadBrand();>
<div data-role="page" >
<div data-role="header" id="header">
<h1>Mobile Template</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a" id="listID">
</ul>
<p class="copyright">Copyright © mobi. Designed by <a href="http://mrova.com" class="ui-link">mRova</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<div class="ui-bar">
<a href="share-dialog.html" data-role="button" data-icon="star" data-theme="a" data-rel="dialog">Share</a>
<a href="contact.html" data-role="button" data-icon="plus" data-theme="a">Contact</a>
<a href="" data-role="button" data-icon="arrow-u" data-theme="a" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
</div>
</body>
</html>
Sorry , it’s too long
When you navigate to a new page in JQM only the body of the new page is loaded, the header being ignored.
This means that any javascript in the header of 2.html will be ignored.
To attain your goal, you will need to 1) insert all your js code in 1.html, including loadBrand function and 2) bind your call to the pageinit event instead of onload (see JQuery mobile doc for more details)