My question revolves around the issue I am having loading the feed when on 3G rather than wifi. I am wrapping it up with Cordova 1.7.0, jq 1.7.1 and jqm 1.1.0.
If on wifi, the feed pops no problem and loads in about a second.
If on 3G, sometimes it loads, sometimes it hangs and does not load. In other words, it is not 100% reliable.
Is there some timeout I am missing somewhere? I am grateful for any feedback or suggestions.
This is twitter.html, which is fed from social.html (below twitter.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="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="twitterfeed">
<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>
</div>
<div data-role="content">
<div class="content-left">
<script src="js/jquery.tweet.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/jquery.tweet.css" media="all">
<script type="text/javascript">
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var rnd = randomString(8);
jQuery(function($) {
$(".rnd").replaceWith(rnd);
$(".demo .code").hide().each(function(i,e){
$(e).before($('').
click(function(ev) {
$(e).slideToggle();
$(this).hide();
ev.preventDefault();
}));
}).each(function(i, e){ eval($(e).text()); });
});
</script>
<div class="demo">
<pre class="code">
jQuery(function($){
$(".tweet").tweet({
username: "nusinov",
count: 10,
loading_text: "Please wait, loading new tweets..."
});
});
</pre>
<div class='tweet query'></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>
**** social.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 src="js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" class="page-header" data-position="fixed">
<div class="logo"></div>
</div>
<BR><BR><BR>
<div data-role="content">
<div class="content-left">
<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">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 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>