I've got a website that I'm converting into an app using JQM. I've read about Pages and how the DOM loads but I'm still uncertain how to architect the site.
The main page of the application is based on the Google Maps API which uses JS to load. There are 150+ target pages so I don't want them to load until the user taps the link. All of the target pages also require JS to initialize. When they return to the main page the cached state should be the default but I also need the option to run JS if the query string changes. Content doesn't change often so my preference would be to cache data once loaded but there would need to be some way to flush the cache.
I converted the site to JQM. The target page JS didn't run so I added rel='external' to the links. The JS now runs on the target but when I link back to the main page it reloads the page without running initializing the JS. The obvious solution would be to add rel="external" but then I'd be defeating all performance value. Any recommendations on how I should structure it?
Using rel=external your links will not be loaded with Ajax and you will lose animated page transitions. If you want to run some script when a page displays, use this page event:
$(document).on("pageshow", "#selector", function(event, ui) { /* your code */ });
This and other useful events are described in jQuery Mobile API Documentation.
For example, pagecreate (the now deprecated pageinit) is called once when the page initializes.
About getting query string parameters, see this answer.
I am relatively new to the world of JS and Phone Gap. I am using the Native TabBar plugin on my app which is working perfectly however when one of my tabs calls:
function TabPressed(){
window.open('www.google.com', '_self', 'location=no');
}
My TabBar loses its functionality. I guess this is because the window.open is opening a new webpage with new js etc... how do I still allow my tabBar to function when a new window is opened.
using window.open you are loading a new page, leaving the old page completely(with scripts and styles), so the listeners that you attached to TabBar are gone.
You should keep this code available at all times. If you need to load external web pages, load them using ChildBrowser plugin.
Or have a local page(index.html) and include all phonegap related scripts in this page. When you need to open a new page, use ajax and insert the html into a container div in this already loaded page. Most of Phonegap applications use this approach.
I'm currently debugging a webpage which is embedded in a UIWebView for display in the app.
It uses some elaborate on-load Javascript which works fine in the Android app but breaks in the iOS app.
This answer pointed me to Safari Web Inspector for UIWebView - however, since the broken Javascript is being run on page load, I can't actually attach the inspector in time to capture whatever's going wrong.
Right now I'm hacking around it by manually inserting a delay into the page, but is there a better way (one that doesn't require I make changes to the page code itself, start the app, rush to load it up in Safari, then wait a while longer for it to continue)?
Important edit: in Safari 7.0, you can reload the page by selecting the "Resources" view, and clicking the refresh arrow next to the top-level page. [It seems you can also do it in at least some versions of Safari 6 by selecting the document tab, clicking the top-level page to select it, and pressing Command+R (the same shortcut used to refresh the page in normal Safari).] Breakpoints you set will still exist if you refresh the page from the Safari Web Inspector, because doing so does not cause SWI to detach the way reloading the page from within your app or the Xcode debugger does. This means that as long as the page doesn't do a Javascript redirect or trigger side-effects in the app itself, you can step through the onload Javascript by loading the page once, setting your breakpoint there, and then reloading the page from within SWI.
Original post: The only solution I was able to find was putting in an "extra" call to shouldStartLoadWithRequest: as follows:
Add a script (not onload, synchronous) as the first element in the page head:
<script type="text/javascript">
window.location = "myapp://catchme";
</script>
Set an XCode breakpoint in shouldStartLoadWithRequest:
Edit the breakpoint to set a condition of:
(bool)[[[request URL] absoluteString] isEqualToString:#"myapp://catchme"]
(Without this condition it will stop on the initial shouldStartLoadWithRequest: call, which isn't what you want because the page won't yet be available to attach the Mobile Web Inspector to at this stage.)
Start the page load, and when it hits the (Xcode) breakpoint, switch to Safari, and launch Mobile Web Inspector with Develop > iPhone Simulator > (my page), then switch back to Xcode and resume execution within a short window before all the resource requests on the page time out.
Weinre helped me to solve this issue, since it's connected right from the start, you get full control of the page.
Why not putting a breakpoint in shouldStartLoadWithRequest and then open the inspector?
Not 100% related to the question OP asked, but I had a similar problem with an Android WebView, in a mobile app whose native code I do not control (but which has WebView debugging enabled).
document.reload() and all other similar means of reloading the page were not working for me
I was thinking to put alert() at the very top of the page, which in theory is a blocking call, but it was not working for me either.
Finally, I went with a blocking, synchronous XHR.
In order to inject an artificial delay when the page is loading, I added a fake call to an endpoint under my control that returns 200 OK after 15 seconds.
Put this at the very top of the <head>
<script>
try {
var request = new XMLHttpRequest();
request.open('GET', 'https://whatever/please-freeze', false); // false = sync XHR
request.send(null);
} catch (err){
debugger;
};
debugger;
</script>
You can for example create your own simple http server with an endpoint behaving like this, but this is a bit of an overkill.
The debugger statements didn't trigger breakpoints in Chrome for whatever reason, but the manually defined breakpoints in the dynamically loaded code (created before) worked fine.
A hack for Windows (Fiddler) users
Since I'm on Windows, I used Fiddler to create an autoresponder with latency.
I also used Fiddler to edit the HTML of the original page request, to inject the <script> mentioned earlier.
I'm fairly new to jquery mobile, and am getting an error when trying to link a file in my jquery mobile project for download. I would like a user to be able to download a .zip file from the app, but get either a page loading error, or undefined displayed in a new page. I tried using an anchor tag to link the file to download, but it doesn't seem to work right. I know jquery mobile makes use of the anchor tag, so I don't know if there is something special that needs to be done. Any help?
You are likely getting the exception when jQuery Mobile assumes the link is a page and attempts an AJAX page load. Disable AJAX loading on the link.
Link
And I have no idea what the typical mobile browser will do with a link to zip file.
I created a web app (without browser chrome) which loads most of its pages locally from index.html. Now I have one page which i can not integrate into index.html, since it has to be refreshed when loaded. I placed it on the same server and called it stats.html and link to it like this:
Stats
When I click this link, the browser pops to the front instead switching to the page without browser chrome.
How can I link to an external page in a way that it still looks like one app?
I appreciate any hints to solve this problem.
just found https://github.com/mrmoses/jQuery.stayInWebApp that seems to be the solution.