What is the difference between JQuery mobile pagecontainer's "load" versus "change" functions and what is intended usage of each? I'm not interested in how the events are for each but rather what does each to do the DOM.
I've been using change to switch pages; but I'm getting some "unexpected" behavior.
Here's my scenario. There is a light page that is presented to the user for login. After logging in, I call "change" to get a page that loads a heavy page (a dashboard). In that dashboard page, I've got a button hooked up that has JQ "change" to a dialog page. When the user confirms the dialog, JQ "changes" to the dashboard page.
The issue is that upon changing back to the dashboard page the dashboard UI is all new. For example, say a user flipped a flipswitch in the dashboard, upon returning to the dashboard the user finds the switch isn't flipped.
After inspecting the DOM I see that when switching to the dialog page, JQ removes the dashboard page from the DOM and inserts the dialog. When switching back to the dashboard, JQ removes the dialog from the DOM and inserts the dashboard. Thus the fresh UI; but if the behavior is such, what is the intent of the "reload" property of each method if "change" chucks the page out of the DOM?
I tried changing things to using "load" and load inserts the DOM in but doesn't make it visible. I can't figure out how to use change to make it visible...
Related
I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.
I'm working on a site that provides web access to to legacy data.
The basic flow is for the user to select a query form from a menu, fill out the form, and submit it. The server generates the appropriate HTML and returns it to the browser. So far, so good.
Some reports can take some time to generate. For those reports I display a "processing" indicator when the form is submitted. This indicator is a normally hidden <div> containing an animated icon.
The problem comes when a user uses the browser's Back button to return to the query form. When the browser re-displays the page with the query form, the processing indicator is still visible. The only way to get rid of it seems to be to refresh the page at that point.
Is there any way to hide it after the Back?
You could set a JavaScript event to automatically remove the indicator after the page loads. That way, the indicator won't display unless the script later tells the indicator to show. In order to avoid never displaying the indicator, you could place the code that displays the indicator after the event that automatically hides it, both occurring on the page loading.
I finally have a solution for this that is working well enough in this application.
Some browsers, like Firefox, fire a document.focus event when the page is re-displayed. Others, like Safari, fire a window.popstate event instead.
I now hook both of these events and it works as expected 99.9% of the time.
As far as I could find, you should be able to use pageshow window event:
The pageshow event is sent to a Window when the browser displays the window's document due to navigation.
This includes:
Initially loading the page
Navigating to the page from another page in the same window or tab
Restoring a frozen page on mobile OSes
Returning to the page using the browser's forward or back buttons
<!DOCTYPE html>
<script>
window.addEventListener("load", console.log);
window.addEventListener("pageshow", console.log);
</script>
<p><a href="https://html.spec.whatwg.org/multipage/">Navigate
away</a> (then come "Back")</p>
See also:
Can I use "pageshow"?
Here is the situation: I am building a chrome extension that injects a sidebar to a page (simple HTML) when the browser icon is clicked. I also use message passing to check if the button was already clicked for a domain name so that I automatically (re)display the sidebar.
I am wondering if it is possible to intercept the loading of the page content so that my sidebar loads first, then the actual page.
If you inject at "document_start", your code executes before any DOM is constructed.
You can then, for instance, hook a DOM Mutation Observer to watch for some kind of parent node to be inserted, say <body>, and add your UI then.
What I got working so far:
Store a few pages in the DOM so that when the user uses the browser's back or forward button it will quickly show the page without reloading it.
What I need help with:
When a user clicks a link to a page that is already in the DOM (for back/forward functionality), I want to remove the requested page from the DOM before jqm processes the request so that the requested page is retrieved from the server rather than the DOM.
If this is possible I'm guessing I need to somehow use the pagebeforechange event.
Basically, I want jqm to use the DOM only for back/forward navigation. Otherwise I want the page to be retrieved from the server.
I have an HTML5 application that manipulates the browser history to show the proper URL for Ajax calls. This works great, but a problem occurs when my application has hyperlink to an external site, say http://www.google.com. When this happens, the history looks like this:
My App Page A -> My App Page B -> Google
When the user hits the back button once, everything is fine. My App Page B is shown.
But when the user hits the back button a second time, the URL changes, but the page doesn't change. My app can't make the proper Ajax call to show the state for My App Page A, because the onpopstate handler never got called. This is because the handler wasn't initialized when the browser went back to My App Page B (no events fire on that back event, so I can't reinitialize the handler.)
This experience is with Chrome, but I have no reason to believe it is Chrome-specific. Is there a way around this problem?
I know that applications like Gmail open all external hyperlinks in a new window. But the requirements for my application don't allow me to do that.
The link provided by #Pumbaa80 put me on track to the right answer.
If you put <body onunload=""> on your page, then is breaks the bfcache on Chrome and other browsers. This means that when you click the back button to return to My App Page B from Google, all page state JavaScript events will fire.
There is no way to get onpopstate to get called on My App Page B after coming back from Google. (This woud be illogical, as that event only fires on the page where you hit the back button.)
The alternative is to execute the logic when My App Page B loads. By breaking the bfcache as described above, jQuery dom ready will fire. By running similar code from onpopstate in a jQuery dom ready callback, I can access the data stored in the History object reset the state of my HTML5 web app after returning from an external page.
I think you'll need to use hash tags to save the state of your page, I don't see a way around this. I've done it in the past with great success using this jQuery plugin, with the very fashionable name BBQ (Back Button & Query library). This will allow your page to perform actions based on the hash tags in the URL.