jQuery Forum

So stressed: Template for JSON + Phonegap not fully working, flicker
[2Replies]
- 22-May-2013 04:54 AM
- Forum: jQuery Mobile
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
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="UTF-8">
6. <title>s</title>
8. <link rel="stylesheet" href="css/themes/silver.min.css" />
9. <link rel="stylesheet" href="jquery/jquery.mobile.structure-1.3.1.min.css" />
11. <style>
12. #loading
13. {
14. position:fixed;
15. _position:absolute;
16. top: 0;
17. left:47%;
18. padding:2px 5px;
19. z-index: 5000;
20. background-color:#CF4342;
21. color:#fff;
22. }
23. </style>
24. <script src="jquery/jquery-1.9.1.min.js"></script>
26. <script type="text/javascript">
27. $( document ).bind( "mobileinit", function() {
30. $.support.cors = true;
31. $.mobile.allowCrossDomainPages = true;
34. // Setting #container div as a jqm pageContainer
35. $.mobile.pageContainer = $('#content');
37. // Setting default page transition to slide
38. $.mobile.defaultPageTransition = 'slide';
39. });
40. </script>
41. <script src="jquery/jquery.mobile-1.3.1.min.js"></script>
42. <script src="cordova-2.7.0.js" type="text/javascript"></script>
43. <script src="js/MapKit.js" type="text/javascript"></script>
44. <script src="js/social.js" type="text/javascript"></script>
46. <script type="text/javascript" charset="utf-8">
47. // Wait for Cordova to load
49. function onLoad() {
50. document.addEventListener("deviceready", onDeviceReady, false);
51. document.addEventListener("online", onOnline, false);
52. document.addEventListener("offline", onOffline, false);
53. }
55. function onDeviceReady() {
57. $(document).on("pageshow", "#pagenamehere", function( event ) {
59. if(navigator.network.connection.type == Connection.NONE) {
60. navigator.notification.alert("Sorry you need to be connected to the internet to access up to date pricing.", function() {}, "You're offline!");
61. } else {
63. $.ajax({
64. url: 'http://www.myurlhere.com.au/?json=1&custom_fields=nativecontent&callback=?',
65. dataType: 'json',
66. crossDomain: true,
68. success: function(data, status)
69. {
71. (data.portfolio);
72. $.each(data.page, function(i,item){
73. //alert(i + item.realisation.title);
74. content = '' + item.nativecontent + '';
76. $(content).appendTo("#datacontent");
78. });
79. },
80. error: function (xhr, ajaxOptions, thrownError) {
81. alert(xhr.statusText); alert(thrownError);
82. }
83. });
86. }
88. });
90. // alert dialog dismissed
91. function alertDismissed() {
92. // do something
93. }
95. // Show a custom alertDismissed
97. navigator.notification.alert(
98. 'Hello.', // message
99. alertDismissed, // callback
100. 'Please note', // title
101. 'I understand' // buttonName
102. );
103. };
105. // Social Plugins Check
107. window.plugins.social.available(function(avail) {
108. if (avail) {
109. // Show social widgets
110. } else {
111. // Social not supported
112. }
113. });
115. </script>
116. </head>
117. <body onload="onLoad()">
119. 
120. <div data-role="page" id="home" data-prefetch="true">
122. 
124. <div data-role="header" data-position="fixed">
125. <h2>Page Name</h2>
126. <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
127. <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>
128. </div>
130. 
132. <div data-role="panel" data-position-fixed="true" id="nav-panel" data-theme="b">
133. <ul data-role="listview" class="nav-search">
134. <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
135. <li><a href="#home">Home</a></li>
136. <li><a href="#bestprices">Best Prices</a></li>
137. <li><a href="#salesindex">Sales</a></li>
138. <li><a href="#salesindex">Store Locator</a></li>
139. <li><a href="#adviceindex">Advice</a></li>
141. </ul>
142. </div>
143. 
145. 
147. <div data-role="content" data-theme="a">
148. <div id="pageimage"><img src="img/banners/banner-name-buy.png" width="320"></div>
150. <div id="content-window">
152. <h3>Welcome</h3>
153. <ul data-role="listview" data-inset="true" data-theme="a">
156. <li><a href="#bestprices"><h3>Best Prices</h3></a></li>
158. <li><a href="#salesindex" ><h3>Sales & Promotions</h3></a></li>
160. <li><a href="#locatorindex">
161. <h3>Store Locator</h3></a></li>
163. <li><a href="#about"><strong></strong><h3>App Information</h3></a></li>
164. </ul>
165. <div class="ui-grid-a" data-theme="a">
166. <div class="ui-block-a" data-theme="a">
167. <a href="#" data-role="button" data-theme="a" onClick="window.open('http://www.facebook.com/pagename','_blank','location=no');return false;">Facebook</a></div>
168. <div class="ui-block-b" data-theme="a">
169. <a href="index.html" data-role="button" data-theme="a">Contact Me</a></div>
170. </div>
172. </div>
174. </div> 
175. 
176. <div data-role="footer" data-position="fixed">
177. <div data-role="navbar">
178. <ul>
179. <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="custom">Home</a></li>
180. <li><a href="#bestprices" data-icon="custom">Prices</a></li>
181. <li><a href="#salesindex" data-icon="custom" >Sales</a></li>
182. <li><a href="#adviceindex" data-icon="custom" >Advice</a></li>
183. </ul>
184. </div>
185. </div>
187. </div>
191. <div data-role="page" id="pagenamehere">
193. <div data-role="header" data-position="fixed">
194. <h2>Page Name</h2>
195. <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
196. <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>
197. </div>
201. <div data-role="panel" data-position-fixed="true" id="nav-panel" data-theme="b">
202. <ul data-role="listview" class="nav-search">
203. <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
204. <li><a href="#home">Home</a></li>
205. <li><a href="#bestprices">Best Prices</a></li>
206. <li><a href="#salesindex">Sales</a></li>
207. <li><a href="#salesindex">Store Locator</a></li>
208. <li><a href="#adviceindex">Advice</a></li>
210. </ul>
211. </div>
212. 
215. <div data-role="content" data-theme="a">
216. <div id="pageimage"><img src="img/banners/banner-name.png" width="320"></div>
218. <div id="content-window">
220. <div class="ui-grid-a" data-theme="a">
221. <div class="ui-block-a" data-theme="a">
222. <h4>Best Prices</h4>
223. <p>Test</p>
224. </div>
225. <div class="ui-block-b" data-theme="a">
226. <h4>Best Prices</h4>
227. <p>Test</p>
228. </div>
229. </div>
232. <div id="datacontent" data-role="content"></div>
235. </div>
237. </div> 
239. <div data-role="footer" data-position="fixed">
240. <div data-role="navbar">
241. <ul>
242. <li><a href="#home" data-icon="custom">Home</a></li>
243. <li><a href="#bestprices" class="ui-btn-active ui-state-persist" data-icon="custom">Prices</a></li>
244. <li><a href="#salesindex" data-icon="custom" >Sales</a></li>
245. <li><a href="#adviceindex" data-icon="custom" >Advice</a></li>
246. </ul>
247. </div>
248. </div>
250. </div>
252. </body>
253. </html>

Need Suggestions - PhoneGap & Remote Data - iOS
[0Replies]
- 08-Oct-2012 10:02 PM
- Forum: jQuery Mobile
Hello all,

I am creating a native iPhone app with jQuery Mobile and PhoneGap, most of the pages are static and will rarely be updated. When they are will be done so in an app update.

However some pages need to pull remote data from my website which uses wordpress. This data is a simple table of price comparisons of products (for now).

Current setup:
- App connects to a particular page using JSON.
- Pulls HTML content (which is a table) from a custom_field called 'NativeContent'.
- Displays in the app (works quite well).
My concerns:
- Future site structure changes (e.g. If i change the way I manage my content (maybe move from HTML tables to a mySQL/php query).
- If I add elements that are not compatible with the jQuery Mobile version built into the app.
- If I add jQuery Mobile features in the remote data (such as pop-ups etc) but someone hasn't updated the app it might not render properly (in future there may be something that requires jQuery Mobile 2.0 for example but someone has an old app with jQuery 1.1).
Ideas:
- Can and will Apple approve an app where some pages have a web-view of a page with-in the page on the app? (Like Flipboard does with a story, Mashable etc etc). This way it could be a web-view of a /dev/page.php and I can make future changes on that page .... I can then maybe do localstorage and things like that?
Any other suggestions?

I can't get my head around a good way to do this ...

Thanks,
Ben

jQuery Mobile + PhoneGap - Slow/Choppy
[6Replies]
- 09-Aug-2012 10:27 PM
- Forum: jQuery Mobile
Hello All,

I have spent many many hours of my time creating a app using jQuery Mobile (1.1.1) and PhoneGap for iPhone.

At this stage it's a series is pages with plain html content, nothing fancy, no plugins or anything like that.

i have an iPhone 4 and its slow ... page transitions are horrible/choppy. The page it loads flashes then it loads it.

Images are slow to load even though its local on the phone.

What can I do? It's pretty much preventing me spending more time into the app or submitting it onto the app store.

Thanks,
Ben

iPhone Web App Problem jQueryMobile 1.1
[7Replies]
- 26-Apr-2012 05:15 AM
- Forum: jQuery Mobile
Hello All,

I have a really weird problem that started with jQuery Mobile 1.1

If i visit my website in Safari and I click a link on the home page (which consists of a list view for a menu) it works fine.

BUT If I view the website on my iPhone via web app (by clicking icon on the home screen) when I click a link it goes to the page ... loads it for a second flashes back to the home page ..... I can never get it to fully load any other page. But again works If I view it in Safari.

What is happening?

Thanks,
Ben

Wordpress JSON API + jQuery Mobile + PhoneGap
[15Replies]
- 06-Mar-2012 04:34 AM
- Forum: jQuery Mobile
Hello All,

I have this plug-in installed on my website: http://wordpress.org/extend/plugins/json-api/

I have created a layout template for a app I plan to make native with PhoneGap and jQuery Mobile.

I NEED to pull page content from my website via JSON using this plugin and sorry I am a noob when it comes to Javascript and I have no idea how to do it :(. I admit I have been searching tutorials and can't get anything to work. Here is some code I have so far but it won't work ... maybe it's doomed to fail... Maybe I have to put something after this <script> code?

Anyone willing to help me out?
2. <script type="application/javascript">
3. $(document).ready(function() {
5. var url="http://myurlhere.com.au/api/get_page/?id=219&custom_fields=nativecontent";
6. var buttonHtmlString = "", pageHtmlString = "";
8. var jsonResults;
10. $.getJSON(url,function(data){
11. jsonResults = data.posts;
12. displayResults();
13. });
15. function displayResults() {
17. for (i = 0; i < jsonResults.length; i++) {
19. pageHtmlString += '' + jsonResults[i].content + '';
20. }
21. }
22. });
23. </script>
Once I get it pulling content I can repeat this template file, change the page ID JSON is to pull to get different content ... I have all them menu's and everything set up already :) (I did this because I feel If i create the ENTIRE page via content from JSON including menus, headers, page conent, footer etc etc Apple will reject it.

Thanks,
Ben

Need Advice: jQuery Mobile + JSON + PhoneGap - Structure?
[3Replies]
- 05-Mar-2012 06:30 PM
- Forum: jQuery Mobile
Hello All,

Summary
- Creating Native iPhone App
- jQuery Mobile + PhoneGap
- Pulling Data via JSON from my site
- Need advice on structure.
My Project
I am currently writing a app for a website I run using wordpress. I am able to add a JSON plugin to allow me to pull data off the server. http://wordpress.org/extend/plugins/json-api/

My site has 500+ POSTS but only about 30ish static pages. The static pages are most important here's a example:

Home
Products > Products
Products > Product A
Products > Product A > Cheapest

I am in the process of creating menu's and a standard page layout design for the app (using jQuery Mobile).

Question
1. Is my only option to create the same URL structure in my native app and on each page have a different JSON link to call data? Or can I SOMEHOW create a dynamic page? Remembering I can't use .php on the iPhone (right?).
  
  Therefore create a index.html page ... Then a /products/index.html page ... Then a /products/producta/cheapest.html page? - Each with a different JSON call on each page ...
2. For POSTS I want to create a page that lists all the posts .... Then I want to somehow create a dynamic page which will allow me to pull data from a post where the ID = post ID. For example somehow create ?id=x or something at the end of the page url in the native app so It knows what post to pull off the server ....
If I need to clarify this let me know.
Thanks very much,
Ben

jQuery Mobile Wordpress Theme - URL Changing ...
[1Reply]
- 17-Jan-2012 11:16 PM
- Forum: jQuery Mobile
Hello All,

I have created a mobile wordpress theme using jQuery Mobile and I love it - Works well.

I don't like how jquery mobile handles the URL's though this is what happens when i click a link:

Home Page: http://www.example.com/DEV
Clicked Page: http://www.example/com#/DEV/Page/secondpage

Why does it add # to the URL and add the rest? Why can't the URL just stay as it's meant to be....

Thanks,
Ben

Response title

Attachments

jQuery Forum

Activity Trend