I have two pages, A and B:
A --> login page.
B --> contain HTML elements and iScoll "pull to refreash" code.
evrey thing works fine but when I login from A to B the iScroll content Not appear, if i do refresh for page B the content appear back and work well, this is iScroll code:
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
generatedCount = 0;
function pullDownAction() {
setTimeout(function () {
var el, li, i;
el = document.getElementById('thelist');
var returnedLIs = "";
for (i = 0; i < 3; i++) {
returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>';
}
$(returnedLIs).prependTo($('#thelist'));
myScroll.refresh();
}, 0);
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll('wrapper', {
hideScrollbar:false,
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
can any one help,,,
edit: <head> section for A.aspx --> Login page:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link href="css/Site.css" rel="stylesheet" type="text/css" />
<!-- Validition Library -->
<script src="Validate/jquery.validVal-4.3.3.js" type="text/javascript"></script>
</head>
edit: <head> section for B.aspx:
<head runat="server">
<%--PULL TO REFREASH--%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<%--PULL TO REFREASH--%>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<%--PULL TO REFREASH--%>
<script type="text/javascript" src="jq/iscroll.js"></script>
<%--PULL TO REFREASH--%>
<link href="css/Site.css" rel="stylesheet" type="text/css" />
<%--pull to refresh--%>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
generatedCount = 0;
function pullDownAction() {
setTimeout(function () {
var el, li, i;
el = document.getElementById('thelist');
var returnedLIs = "";
for (i = 0; i < 3; i++) {
returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>';
}
$(returnedLIs).prependTo($('#thelist'));
myScroll.refresh();
}, 0);
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll('wrapper', {
hideScrollbar:false,
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
<%--pull to refresh--%>
</head>
Let me explain you what is happening.
You have 2 separate HTML pages. Every page has a HEAD with javascript content.
Your problems comes to how jQuery Mobile handles page loading. Only first page is fully loaded. When next page is about to be loaded ONLY its body is loaded into the DOM and rest is discarded. This is because first page is already inside the DOM, there's no point in having to HEAD's inside.
This can be fixed in few ways:
Also take a look, I have another great answer regarding this + examples: Why I have to put all the script to index.html in jquery mobile