I have a site with multiple html files. For some of the page, am setting data-dom-cache="true". But, i do not want the page to be cached forever. Is there any way to specify the duration for which the page should be cached. What should be done for this in JQM.
In jQuery Mobile there is not a DOM cache expiration time setting but you can handle manually the removal from DOM.
In order to remove a page from DOM you have to use:
$('#page-id').remove();
Related
I'm using JQM 1.3.2 and 1 page per html file. JQM automatically removes pages from the DOM that are loaded by AJAX. But there is a known issue (clearly stated in the docs and frequently discussed in various forums) where the first page is not removed. I'm wondering if there are any potential pitfalls with this workaround:
$(document).on('pageshow.firstPageRemoval', function (event, data) {
if (data.prevPage.length > 0) {
data.prevPage.remove();
$(document).off('pageshow.firstPageRemoval');
}
});
From my brief testing, it seems to be working as designed. The first page loads, and data.prevPage.length === 0, so it does nothing. After the next page transition, it removes the first page and removes the handler.
My question is, are there any issues that might crop up because I've removed the first page?
Only issue is browser history, basically you will remove page but it will still stay in history.
Of course there's a workaround. Instead of removing first page, don't have one in the first place.
Let your first HTML be blank, and load external page during that page document ready state. Unfortunately you will not be able to use pageinit (or similar page event here) because you will not have initial page to trigger it.
This way you will circumvent this problem and browser history will stay clean and intact.
Why do I need to have site unique form element id's when using jQuery Mobile? I would really like to know how the DOM works in order to create my app memory efficient.
I get this information about the DOM cache:
http://demos.jquerymobile.com/1.3.2/widgets/pages/
Whenever it loads a page via AJAX, it flags the page to be removed
from the DOM when you navigate away from it later (technically, on the
pagehide event).
So this information about Markup conventions seems to be contradicting, or at least incomplete:
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/
...the id attributes of form
controls need to be not only unique on a given page, but also unique
across the pages in a site.
This is because jQuery Mobile's single-page navigation model allows
many different "pages" to be present in the DOM at the same time. You
must be careful to use unique id attributes so there will be only one
of each in the DOM.
Is there a way to query the contents of the HTML5 application cache?
I'm writing an iOS application that uses a lot of cached web content. Before loading a given page when the app is offline, I'd like to check whether the page exists in the cache. If it doesn't, I'll notify the user that they have to be online to see that content; if it does, I'll go ahead and load it.
Now, iOS has its own URL caching system, and I initially just assumed that I could check the contents of the cache this way:
if ([[NSURLCache sharedURLCache] cachedResponseForRequest:myRequest] != nil) {
// go ahead and load the page
}
else {
// notify the user that the content isn't available
}
Silly me. It seems that iOS's cache and HTML5's cache are unrelated: -cachedResponseForRequest: returns nil for any request, even when I can see that the URL is in the HTML5 application cache (using the Safari web debugger).
So, is there some way that I can query the contents of the HTML5 application cache? It doesn't matter if the answer uses Objective-C code or Javascript, since I can always just execute the relevant JS from Objective-C.
There are two properties of HTML5 AppCache which mean that in normal operation there shouldn't be a need to do so:
AppCache update operations are atomic, either the entire cache is updated, or none of it it
Once an AppCache is created then all files that are in the cache are served from the cache
The end result is that for any given version of the manifest file, any file listed in it that gets loaded into the browser will be consistent with all the other files listed in the manifest. All you should need to check is window.applicationCache.status and check that it is not UNCACHED.
There is another possibility. If you are 'lazily adding' files to the AppCache as described in Dive Into HTML5 then it could be that you're not sure which files are cached. In this case you could adapt one of the approaches for detecting online state, I'm not going to give you a fully tested solution but here is the general idea:
Create a web page containing a unique identifier, something that's unlikely to ever appear normally in a page. The identifier can be in hidden content in an otherwise normal page.
Set this page as the generic FALLBACK in your manifest.
Request pages with AJAX.
Scan the response for the unique identifier, if you find it then you know the page requested is not in the AppCache
Yes,the cache is stored in the Application.db.
I'm trying to figure out exactly what happens when you link to a same-domain external page with JQM. I know the new page gets added to the DOM, but if I cruise through 5 or so of these links, are all 5 now in the DOM?
Firebug is showing the initial page and the active page in the DOM and nothing else.
Chrome is showing variable results, usually storing the last page and the active page.
What exactly happens here?
Do I need to assume all my handlers on a page are lost when I change page? So I need to rebind them on each pageinit?
Easy way to check. Bind page create:
$('#pageID').live('pagecreate', function (event) { alert("Inserted to the dom") };
That triggers when the page is inserted to the dom. If the alert is triggered every time you enter the page, it means the page is not saved to the dom. And I think that is actually the case. But I am not sure.
I'm using JQuery UI tabs loading content via ajax like this:
$('#tabsElem').tabs({ajaxOptions:{cache:false},
cache:true);
Consider this series of events:
Tabs are displayed.
A loading icon is shown while an ajax request is made.
The user selects another tab.
The ajax request hadn't returned yet so it is aborted.
The user returns to the original tab.
The tab's content is now empty and the ajax request will not be resent because of the caching.
I think you can see that last part is a problem. I've looked into a few options but nothing feels great yet. Any beautiful solutions out there?
Turns out the solution is to update your version of JQuery UI.
The results I described happen on version 1.8.6. On version 1.8.16 when you go back to the original tab the aborted ajax request is made again.
Thanks JQuery