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
Related
I am looking for a way to simply disable AJAX on ONLY the home page in my project. I am using MVC so there are links to the home page in many areas. I want AJAX for the entire site however not when loading the home page. The reason is because I am using a script to setup the UI dynamically, it contains objects and those objects load when the page loads as a hard refresh but no when jQuery Mobile transitions to the page. I am looking for a solution where I can add a Script to just the home page to disable AJAX whenever it is referenced. But still have AJAX for the rest of the solution. Its a very unique situation but I haven't found anything that could prevent ONE page from being loaded through AJAX. Does anyone know?
if I could I would like to do something like this only on the home page
<script>
$(document).bind(function(){
[some call to disable this page from being loaded with AJAX]
});
</script>
Thanks in advance.
No such thing exists. Think of AJAX like a little mini-browser: if the URL returns a response, it can access it. However, it might be possible to branch on the existence of a request header in your Home action and return something like a 403 Forbidden if an "AJAXy" request header is detected.
jQuery, for example, sends an X-Requested-With: XMLHttpRequest header along with its request. If this header is present, the request most likely came from an AJAX method in jQuery (or other libraries that potentially use the same methodology). You can also pass your own custom headers with the AJAX request, if you want. However, all of this is implementation-specific, so it pretty much depends on all developers on your team doing things a certain way. For example, if someone used a standard JavaScript XHR object to make the request, then the X-Requested-With header would be absent. Or, if you used a custom header, every developer would need to pass that header every time, or again, the logic would break down.
If your business rules say that the home page shouldn't be requested via AJAX, the best way to handle that is at a business level, i.e. policy. Anything you try to in the actual code could easily be worked around.
I am building an app using Backbone.js and jQuery Mobile. On some pages in my app I have external href links and I'm running into an issue.
When a user clicks and external href link, get taken to the external site and then hits the back button. My app does not load from the proper page where the user originally left the app from.
In fact my entire DOM is reset so it looks like my site gets a complete refresh and doesn't keep any of its former state.
I have been trying to search for a solution but this issue is kind of hard to word out. I hope it makes sense.
Does anyone have any suggestions?
UPDATE
Stupid error on my part.. I had a bad id set on the page and it didn't load the data I had saved in the session for it when a user returns to the page.. Changed the id and all is well. Thanks!
Link
Make you external links open up new tabs.
If you have used one html with multiple pages solution then there's an explanation for this.
rel="external" will cause a full page refresh so last page location will not be remebered. When you return to the last location it will trigger new refresh and the first page will be shown again.
This can be prevented with a multiple html page solution.
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.
From the documentation, http://jquerymobile.com/test/docs/pages/page-links.html
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
Now, that seems to only apply to GET requests (i.e. via link elements). However, what is the guideline for POST requests? Right now, for the project I am currently working on, if I make a POST request with response that contains multiple N internal pages (lots of divs with data-role="page" and unique IDs), jQuery mobile only loads the first one it sees, and ignores the rest.
I am pulling my hairs out, not sure what to do to work around this. Is there a way to force jQuery mobile to do to full page reload?
Thanks a bunch in advance!
It turns out that data-ajax will work just fine inside the form tag. i.e
<form action="target.php" method="post" data-ajax="false">...</form>
Previously, I thought I had set data-ajax="false". However, it turns out that with the PHP framework (yii) I use, there is a big difference between "data-ajax" => false and "data-ajax" => "false" (former assigns to boolean type, and later is string type). Anyway, long story short, data-ajax is indeed the solution.
From the index page of the site, I am loading another page which has 3 divs with the data-role of page.
However, jquery mobile only appends one of the pages to the dom.
I presume the changePage function is grabbing the first div with a data-role of page and inserting it. I wonder if there is a way to get it to insert all the divs with a data-role of page or dialog.
Any help more than appreciated.
thanks
What you are trying to do is currently not possible with JQM, as only the first page from a multipage gets loaded into the DOM.
I would point point you to a link in the JQM docs that would explain this behavior, but there isn't one... I already filed this as issue on Github, so that the Docs at least make clear what you can do and what does not work with multipages.
As I'm stuck with the same issue I started writing a plugin to be able to load multipages (among other things). I still have a few things to sort out, but when it's working I can send you the link.
You can use a "subpage" plugin to get the behavior you desire. Basically one page contains a bunch of subpages, which all get loaded into DOM. The pattern would be:
<div data-role="page">
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
</div>
The project is available here: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget.
I've personally been having problems with this plugin, but I think for simple scenarios, it works fine.
Also, there is no documentation for it. For example, I still don't know the proper way to call $.mobile.changePage() with this plugin. :)
According to JQM at this page:
"jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget"
You can also add rel="external" attribute to the href pointing to Page B.
rel="external" and data-ajax="false" will force JQM to load the entire page as new. Unfortunately, it appears this removes the ability to use a page transition from PageA to PageB.
Example: Page B
I'm now looking to load Page B with JQM methods instead of relying on the automagic mechanisms. It appears you must use single page templating throughout (as recommended) or pagecontainer load method (essentially the same as single page) if you want hashtag transitions within a "single page", after the DOM is initially loaded. For example, link to a single page, listen to "pageinit" of that page, then use pagecontainer("load"). Make sure the subsequent page (the page your're injecting) is not needed as a direct incoming page.