By default jQueryMobile is supposed to ajax new pages. However the behaviour I am seeing is erratic. Sometimes it works and sometimes (e.g. the next day) it does full page refreshes.
My links are absolutely normal local links to the same page: <a href="./default.htm?a=123>Link 123</a>, no rel="external" no $.mobile.options set etc.
Currently, I'm using Chrome and it's not doing ajax. The exact same application in IE9 is doing ajax (with # history). But I have seen Chrome do ajax (yesterday). If I debug it actually goes into a $.ajax() function for my link but the result still is that the whole page is refreshed.
My question is this: under what circumstances (except those stated above) does jQueryMobile (v1.1.1) fallback to non-ajax page refreshes?
I suspect some browser check or other exception is causing ajax to be circumvented.
Related
I have a website that consists of a bunch of single-page-template jQuery Mobile pages that are linked to each other using prefetching and caching. All pages exist in the DOM (after they are prefetched).
This works fine on my desktop browser. However, when I browse my site using my HTC EVO 3D Android phone (either the default browser or the Opera browser), switching between pages acts like I'm actually going to an external page. In other words, the browser's address bar appears momentarily, then the page turns white, then the new page loads, then the address bar goes away.
I would expect the behavior to be exactly that of a multi-page-template. For example, if you browse the multi-page-template in the jQuery Mobile documentation, you can switch from one page to another very smoothly. The browser address toolbar does not pop up, and there is no white flickering in between pages. However, if you browse the "persistent toolbar" example (which uses prefetching to load all the pages in the example), you will see the same behavior that my site is experiencing. The browser's address bar will appear, the page will turn white, the next page will render, then the address bar will go away.
So how do I make my prefetched pages act like the multi-page template without having to rewrite my site to use the multi-page-template?
For reference, here are the jQuery Mobile persistent toolbar demo and multi-page demo that I believe should work exactly the same (in regard to URL address bar appearing):
http://jquerymobile.com/demos/1.3.0-rc.1/docs/toolbars/footer-persist-a.html
http://jquerymobile.com/demos/1.3.0-rc.1/docs/pages/multipage-template.html
Unless your initial page links directly to all of your other pages with the data-prefetch attribute on your <a> link tags, those pages will not be prefetched and cached. I state this because your question implies that there is some chaining with your pages which is not supported. You can load also load and cache them via the API.
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
Are you able to actually inspect the DOM on your mobile Android device?
Is there any chance the pages are being flushed from the DOM based on a memory constraint? I am not aware of any specifics in the jQM docs on this scenario but at some point you will fill the cache.
I am developing a mobile web application using ASP.NET mvc 4. I am facing problem with response.redirect to some other website (eg: http://www.google.com) from my controller,it is showing "Error Loading Page" message without redirect.
I have tried the following codes to redirect under "About" action on Home controller:
return Redirect("http://www.google.com");
return RedirectResult("http://www.google.com");
response.Redirect("http://www.google.com");
All the above produced the same error.
Note: the hyperlinks in view pages are working fine
Thanks
When you are setting up your link to the controller...you need to make sure the data-ajax attribute is set to false.
Redirect
My understanding is that jQuery mobile wraps all anchor request in ajax, unless otherwise specified, and your response.redirect is just being served to the jQuery .done function which can't handle it properly.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Important: rel="external" and $.mobile.ajaxEnabled=false
Slightly different implementations of the replaceState API in various
browsers can cause odd behavior in specific scenarios. For example,
some browser implementations (including desktop browsers) implement
the popstate event differently when linking externally and moving back
to a page onto which state has already been pushed/replaced. When
building a jQuery Mobile application where the Ajax navigation is
being explicitly disabled, either through the frequent use of
rel="external" on links or by disabling Ajax navigation completely via
the $.mobile.ajaxEnabled=false, we recommend disabling the pushState
feature to fall back to the hash based navigation for more consistent
behavior.
I suspect your problem is that you are redirecting outside local site.
See this part of the documentation: http://jquerymobile.com/test/docs/pages/page-navmodel.html
Hash values created by jQuery Mobile are normalized as full paths
relative to the URL of the first "real" page that was loaded.
Then later it confirms the "local" requirement here:
When a link is clicked, jQuery Mobile will make sure that the link is
referencing a local URL
I think the solution is to not redirect users to other domains.
UPDATE
The above solution highlights the wrong part of the problem but the solution may still be the same. You should use javascript to do the redirection such as:
window.location = 'http://www.google.com/';
I believe you will run into issues if your JQM solution is attempting to make an ajax call that is then redirecting. One issue, specifically for google.com, could be if you are signed in to google. It will then redirect you to https for example. That could be interfering with the JQM / window.location.hash.
I'm a bit in a sticky situation.
I'm developing a mobile website with jQuery mobile 1.1.1. Its a pure javascript html5 implementation.
The anatomy is like follow:
1 HTML page called index.html containing a complete HTML structure with header, all includes (javascript/css etc), body etc. This page redirects via $.mobile.changePage('login.hml') to a login site.
X sub-sites containing only <div data-role="page" data-theme="a" id="x" data-title="x"> and site specific html/javascript code.
This works fine so far. The only problem is, when I refresh the page (with F5 for example), I'm always redirected to the login site after the refresh.
Example:
I'm on the following site (url):
http://mysite/mobile/web/#/mobile/web/list.html
then, I press F5 for refreshing the page.
The refresh is done and afterwards i get redirected to:
http://mysite/mobile/web/#/mobile/web/login.html
How could I prevent this behavior?
When refreshing you page your browser will interpret the URL as the page you want to display as http://mysite/mobile/web/ which is why you open your index.html, which redirects you to login.html.
There are 2 possible fixes:
modify your redirection so that you parse the target URL and identify the intended location (everything after the #, in you example /mobile/web/list.html) and redirect to this given page.
You should of course first check if your user is logged properly in order to redirect to login.html if necessary.
you can also modify the URL used by your list.html page so that it properly uses http://mysite/mobile/web/list.html (if that is indeed where your file is stored). I would not favor this approach as it will require you to add all the proper header information in this page also, and I feel it easier to conform to the JQuery Mobile spirit by having a single entry point to your site, handling dynamically the destination of your user
I have a very simple test case that explains the problem.
Here's the page that I'm displaying in Rails in an ERB file.
<div><%=rand%></div>
<p>Go</p>
To show the error, I load the page. I note the random number displayed as rand1. I click on the Google link. I click the browser's "Back" button. I note the random number displayed as rand2.
Here's the problem:
In Firefox and Chrome, rand1 != rand2 (always).
In Safari and IE, rand1 == rand2 (always).
Why the discrepancy in browsers? Why is Safari and IE caching the output from Rails while the other two browsers are not? How do I get Safari and IE to refresh the page?
(This is a simple test case to show the problem - this has implications in my Backbone application).
IE and Safari appear to be caching the response from the server, obviously; as long as your browsers are configured correctly, you can change this by changing the Cache-Control header in the response.
Another Stack Overflow post shows the appropriate way to do that, though in Rails 3 there's a shortcut method to accomplish this: you can invoke expires_now in the controller action to avoid manually setting all these headers.
WebKit in particular has an aggressive page caching strategy for handling exactly the case you're describing (clicking a link and then immediately clicking the back button). The idea is to make the back action happen almost instantaneously by caching not just the resources but also the DOM and other state of the page. You can read about it in these two articles:
WebKit Page Cache I — The Basics
WebKit Page Cache II — The unload Event
You may be able to use a combination of the load/unload and pageshow/pagehide events to accomplish what you need.
I'm not sure if IE implements something similar to WebKit, but maybe this will fix it too.
I'm working on a mobile view of our site. I'm trying to implement JQuery mobile but I'm seeing two issues that might prevent me from continuing and hoping some of you have insights.
Many pages are brought up by searches. But when the page is brought up from a search box I can't get it to load as rel='external', thus the page loads via Ajax. Great, except the pages that load are almost always larger pages broken up into data-role='page'. So when the page loads it's unable to navigate within that page, though it does hide the secondary sections. According to the documentation I need to put the rel="external" on the form, but that is not working for me. Is it possible to get the page to load without Ajax via a form submit?
Second question in same topic. In the crawl, walk, run fashion first step is a basic mobile friendly site. But I'm hoping this can also be the foundation for a PhoneGap based version of the site. From what I understand the basic model for PhoneGap will break if pages are not always loaded in Ajax as it will trigger a browser load. Since JQM requires any page with embeded data-role=page sections to be loaded via rel=external, which turns off Ajax loading, does this mean using JQM will preclude using Phone Gap to create the native client later?
Thanks in advance for any replies.
This script below should be put between your jquery min and your jquery mobile min. Otherwise it will not take effect. Adding an extension to the $.mobile with these ajax functionalities turned off may help your issue. All 3 are not needed, but they are all test worthy for your issue.
<script>
$(document).bind('mobileinit',function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxLinksEnabled: false,
ajaxEnabled: false
});
});
</script>
Phonegap is for building phone applications, not mobile websites. It is composed Javascript which talks to specific libraries to interface with the mobile device itself.