So stressed: Template for JSON + Phonegap not fully working, flicker

Hey all,

After DAYS of trying to get this to work and no luck I've thought I'll try get some help.

What I'm trying to do:

Phonegap + jQuery Mobile app (Done)
On selected pages pull html data from my wordpress website using the json API plugin.
Steps I want include: Opens app, user navigates to a page, once the page is shown if the device is online start to pull data and show it, if its offline alert the user with a message and have a refresh button to try again (maybe the users 3G dropped out for example).

What i've done

Successfully set up phonegap, jQuery mobile and multiple pages on the index.html page.
Successfully called document.addEventListener("deviceready", onDeviceReady, false); etc.
At the moment have the particular page getting data from my server BUT there is a issue of going back to the page it will do it again so its shown twice, then 3 times, then 4 times etc.
Have a issue with the transition flickering while trying to start the json script on.pageshow more here: https://groups.google.com/forum/?fromgroups#!topic/phonegap/Lbbq_vUFaV0

Issues

Transition flickers when loading the page and leaving the page that contains the json, I am using "$(document).on("pageshow", "#pagenamehere", function( event ) {" because I only want the json script to start when the page actually loads.
The data loads, but if I leave the page and come back the script activates again, so the data is doubled up, then if I come back triples. So I need a way for it to clear when I leave the page and it reloads when I go back to the page.
I am trying to set this up as a template page because I need to repeat it over a number of pages that points to a different post on my site.
Maybe my code isn't that great?

My code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s</title>
<link rel="stylesheet" href="css/themes/silver.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.3.1.min.css" />
<style>
#loading
{
position:fixed;
_position:absolute;
top: 0;
left:47%;
padding:2px 5px;
z-index: 5000;
background-color:#CF4342;
color:#fff;
}
</style>
<script src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#content');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="jquery/jquery.mobile-1.3.1.min.js"></script>
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/MapKit.js" type="text/javascript"></script>
<script src="js/social.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("offline", onOffline, false);
}
function onDeviceReady() {
$(document).on("pageshow", "#pagenamehere", function( event ) {
if(navigator.network.connection.type == Connection.NONE) {
navigator.notification.alert("Sorry you need to be connected to the internet to access up to date pricing.", function() {}, "You're offline!");
} else {
$.ajax({
url: 'http://www.myurlhere.com.au/?json=1&custom_fields=nativecontent&callback=?',
dataType: 'json',
crossDomain: true,
success: function(data, status)
{
(data.portfolio);
$.each(data.page, function(i,item){
//alert(i + item.realisation.title);
content = '' + item.nativecontent + '';
$(content).appendTo("#datacontent");
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.statusText); alert(thrownError);
}
});
}
});
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alertDismissed
navigator.notification.alert(
'Hello.', // message
alertDismissed, // callback
'Please note', // title
'I understand' // buttonName
);
};
// Social Plugins Check
window.plugins.social.available(function(avail) {
if (avail) {
// Show social widgets
} else {
// Social not supported
}
});
</script>
</head>
<body onload="onLoad()">
<div data-role="page" id="home" data-prefetch="true">
<div data-role="header" data-position="fixed">
<h2>Page Name</h2>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a data-icon="info" data-rel="dialog" onClick="window.plugins.social.share('Message goes here.', 'http://www.url.com.au', 'www/image/local_image.jpg');"> </a>
</div>
<div data-role="panel" data-position-fixed="true" id="nav-panel" data-theme="b">
<ul data-role="listview" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#bestprices">Best Prices</a></li>
<li><a href="#salesindex">Sales</a></li>
<li><a href="#salesindex">Store Locator</a></li>
<li><a href="#adviceindex">Advice</a></li>
</ul>
</div>
<div data-role="content" data-theme="a">
<div id="pageimage"><img src="img/banners/banner-name-buy.png" width="320"></div>
<div id="content-window">
<h3>Welcome</h3>
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#bestprices"><h3>Best Prices</h3></a></li>
<li><a href="#salesindex" ><h3>Sales & Promotions</h3></a></li>
<li><a href="#locatorindex">
<h3>Store Locator</h3></a></li>
<li><a href="#about"><strong></strong><h3>App Information</h3></a></li>
</ul>
<div class="ui-grid-a" data-theme="a">
<div class="ui-block-a" data-theme="a">
<a href="#" data-role="button" data-theme="a" onClick="window.open('http://www.facebook.com/pagename','_blank','location=no');return false;">Facebook</a></div>
<div class="ui-block-b" data-theme="a">
<a href="index.html" data-role="button" data-theme="a">Contact Me</a></div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="custom">Home</a></li>
<li><a href="#bestprices" data-icon="custom">Prices</a></li>
<li><a href="#salesindex" data-icon="custom" >Sales</a></li>
<li><a href="#adviceindex" data-icon="custom" >Advice</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagenamehere">
<div data-role="header" data-position="fixed">
<h2>Page Name</h2>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a data-icon="info" data-rel="dialog" onClick="window.plugins.social.share('Message goes here', 'http://www.myurl.com.au/', 'www/image/local_image.jpg');"> </a>
</div>
<div data-role="panel" data-position-fixed="true" id="nav-panel" data-theme="b">
<ul data-role="listview" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#bestprices">Best Prices</a></li>
<li><a href="#salesindex">Sales</a></li>
<li><a href="#salesindex">Store Locator</a></li>
<li><a href="#adviceindex">Advice</a></li>
</ul>
</div>
<div data-role="content" data-theme="a">
<div id="pageimage"><img src="img/banners/banner-name.png" width="320"></div>
<div id="content-window">
<div class="ui-grid-a" data-theme="a">
<div class="ui-block-a" data-theme="a">
<h4>Best Prices</h4>
<p>Test</p>
</div>
<div class="ui-block-b" data-theme="a">
<h4>Best Prices</h4>
<p>Test</p>
</div>
</div>
<div id="datacontent" data-role="content"></div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom">Home</a></li>
<li><a href="#bestprices" class="ui-btn-active ui-state-persist" data-icon="custom">Prices</a></li>
<li><a href="#salesindex" data-icon="custom" >Sales</a></li>
<li><a href="#adviceindex" data-icon="custom" >Advice</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Topic Participants
ben.d
kaine.varley
jtara-jquery

So stressed: Template for JSON + Phonegap not fully working, flicker

So stressed: Template for JSON + Phonegap not fully working, flicker

Topic Participants

ben.d

kaine.varley

jtara-jquery