Response title
This is preview!
Move this topic
Refresh button in the header, but how to avoid the flash transition?
in jQuery Mobile
•
10 years ago
Hi, again, thanks to all the mods and contributors for helping me along the way. Not sure there is a way to fix the issue, but when I have the following code in the header, the refresh button refreshes the whole page, instead of just the content section. I am trying to allow users to refresh tweets and everything works fine, except this dang transition flash:
<div data-role="header" class="page-header" data-position="fixed">
<a href="social.html" data-icon="arrow-l" data-transition="none" data-iconpos="notext" data-direction="reverse">Back</a>
<div class="logo"></div>
<a href="blog.html" data-icon="refresh" data-transition="none" data-iconpos="notext" data-direction="reverse" data-ajax="false" class="ui-btn-right">Refresh</a>
</div>
Thanks if anyone can help with a pointer or two.
1
Replies(5)
Why do you think that re-loading the page would do anything other than refresh the entire page?
With data-ajax="false", yet...
It did exactly what you asked it to do.
With data-ajax="false", yet...
It did exactly what you asked it to do.
Leave a comment on watusiware's reply
Hi - yes, I guess I did not phrase the question correctly! Is there a way to refresh the dynamic content in the <data-role="content'> section, where I have the div loading dynamic data from an ajax call to a php script? Trying to avoid the header/footer flash on a page reload. Thank you!!!
Here is how the page is coded:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">
<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="application/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
setTimeout(function () {
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
hScrollbar: false,
vScrollbar: false,
checkDOMChange: false });
myScroll.refresh();
}, 100
});
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="blogpage" data-dom-cache="false">
<div data-role="header" class="page-header" data-position="fixed">
<a href="social.html" data-icon="arrow-l" data-transition="none" data-iconpos="notext" data-direction="reverse">Back</a>
<div class="logo"></div>
<a href="blog.html" data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-ajax="false" class="ui-btn-right">Refresh</a>
</div>
<div id="wrapper">
<div id="scroller">
<div data-role="content">
<div class="content-left">
<BR> The Latest Blog Posts<BR><BR>
<script type="text/javascript">
$(document).die('#blogpage','pageinit');
$(document).delegate('#blogpage','pageinit', function(){
var blog = $('#blog');
$.ajax({
url: 'http://www.url.com/aaa/questionbank.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 7000,
success: function(data, status){
$.each(data, function(i, item){
var blogpost = '<div data-role="collapsible" data-content-theme="f" data-min="true" data-collapsed="true" data-theme="f"><h2>'+item.title+'</h2>'
+ '<p><B><i>Published Date: '+item.date+'</i></b><br>'
+ item.blog_text+'</p></div>';
blog.append(blogpost).trigger('create');
});
},
error: function(){
blog.text('We could not load your data, please refresh the screen.');
}
});
});
</script>
<div id="blog"></div><BR><BR><BR> <!-- this is the JSON load in -->
</div>
</div>
</div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Leave a comment on applenoose's reply
Why would you have to refresh the whole page? Why not get your data and replace your old data.
There is an example I created with a bunch of dynamic data that you can add. you can also empty the list and all that. Take a look.
Leave a comment on haga0054's reply
Hi, thanks. I am still not quite getting 'it'. I am pretty new, you could have guessed. Two things happening, which I can not seem to figure out. 1) How to refresh the content section of the page without the flashing issue, 2) when the div gets loaded with the data, it loads each db row TWICE, in collated fashion. Obviously, it should only be loading each row once. I thought if I put the $(document).die on preceding line, it would wipe the DOM clean, but it does not...
The page below is linked to from another .html document, the link looks like this:
<li><a href="blog.html" data-transition="none" data-prefetch>TP Blog</a></li>
Here is blog.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">
<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="application/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
setTimeout(function () {
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
hScrollbar: false,
vScrollbar: false,
checkDOMChange: false });
myScroll.refresh();
}, 100
});
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-dom-cache="false">
<div data-role="header" class="page-header" data-position="fixed">
<div class="logo"></div>
</div>
<BR><BR>
<div id="wrapper">
<div id="scroller">
<div data-role="content">
<div class="content-left">
<BR><BR><BR><BR>
<ul data-role="listview" data-theme="f" data-inset="true" style="margin-bottom:-3px">
<li><a href="blog.html" data-transition="none" data-prefetch>TrainingPro Blog</a></li>
<li><a href="twitter.html" data-transition="none" data-prefetch>Twitter</a></li>
<li><a href="rss.html" data-transition="none" data-prefetch>Industry News</a></li>
</ul>
<div class="shadow2box"><img src="images/shadow2.png" class="shadow2" alt="shadow"></div>
<div class="content-center">
<p>Check back here to review important update
for your Continuing Education, Pre-Licensing,
Webinar and industry focused commentary.</p></div>
</div>
</div>
</div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Leave a comment on applenoose's reply
WOOT, found the solution to 2) above, by using mobileinit instead of pageinit:
$(document).die('#blogpage','mobileinit');
$(document).delegate('#blogpage','pageinit', function(){
Leave a comment on applenoose's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to applenoose's question
Statistics
- 5 Replies
- 2364 Views
- 0 Followers