I am using jQuery Mobile Router in a multi page setup.
For some reason, the first page load isn't handled the way it should. I have a first page that jQuery Mobile uses as default page, but even if the user includes a hash that should trigger another route, it isn't caught by the router.
The only way I've been able to resolve the issue, is by using this ugly hack:
$(document).one('pagebeforechange', function(event, data) {
data.toPage = window.location.hash
});
I am clearly doing something wrong, but where?
The include order is: jQuery Mobile Router, jQuery Mobile and then my custom router setup.
This didn't help, so I tried setting autoInitialize to false as described in issue 12 on jQuery Mobile Routers issue tracker. That didn't help either.
Any suggestions?
Related
Please can somebody explain in more detail what $.mobile.hashListeningEnabled does when enabled/disabled in jQuery Mobile?
I have tried debugging the source, but there are some bits of code I do not fully understand. And the documentation is a bit abstract (https://api.jquerymobile.com/global-config/):
jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.
The reason I ask, is because I am having problems on iOS 9 with <select data-native-menu="false"> elements. If this list too long, jQuery Mobile creates a full-screen dialog.
But it closes straight after displaying. I have been looking around and noticed somebody else has the same problem: JQuery .popup("open") not working properly on iOS 9 device.
One answer suggested seems to work OK for me - which is to set hashListeningEnabled to false:
$(document).on('mobileinit', function () {
$.mobile.hashListeningEnabled = false;
});
But I am not comfortable rolling this out to production until I understand what exactly it does.
$.mobile.changePage seems to still function.
You can have multiple pages in one html file. And you can go to "another page" even if that page is actually another div with data-role="page" in it.
http://demos.jquerymobile.com/1.4.5/pages-multi-page/
So, if you are using this type of navigation, you are screwed.
Apple guess that somebody could make an XSS attack using hash.
/pages-multi-page/#two
popups are using hash also: /pages-multi-page/#&ui-state=dialog
I need to use jQuery Mobile to build an app and I'm stuck at page navigation. I'm using jQuery Mobile 1.4. And the documentation doesn't help me very much. I have a few questions. Any help would be appreciated. Also please point out if I misunderstood anything.
I understood that $.mobile.navigate is the recommended method to change between pages in jQuery Mobile 1.4. Hoe can I use it to send data from one page to another?
What is the need for pagecontainer widget's load method? The change method itself seems to load an external page.
When I use the pagecontainer widget's change method to load an external page, it loads the page into the DOM and changes to it as expected. But, when I go back, the external page is removed from the DOM. Is there anyway to load an external page only once and let it persist in the DOM as long as the app is running?
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 playing around with jQuery Mobile and ran into some (for me) strange behavior.
I have a bunch of links each pointing to the same jQM page, #otherpage, but with different values for the URL query string, like #otherpage?q=foo, #otherpage?q=bar, and so on. The change to the other page works fine but the query string sticks between clicks, so if I first click the link to #otherpage?q=foo, and then goes back to the first page, all subsequent page changes to #otherpage will have q=foo, no matter what the currently clicked link's href says.
jsFiddle didn't seem to have support for jQM so I put an example here: http://cpak.se/dump/location-search-test.html
I've tried this in Chrome and Safari on Mac.
I use the query string to pass simple data between pages since I have other code hooked into the pagechange events, that is more or less unaware of what earlier code might have done. If I can't get this working I'll have to find another way to pass data around... :P
Cheers!
/Christofer
Disabling jQm seems to be the easiest solution for updating the url parameters correctly in the browser. E.g. adding data-ajax="false" in the link anchor and not using $.mobile.changePage.
<a href="#page?id=1" data-ajax="false">
In a dynamic app modify the value of href beforehand.
I've looked up for this issue because it seems a little bit weird indeed. There is a open issue about this: https://github.com/jquery/jquery-mobile/issues/2859
Atm jQuery Mobile doesn't recommend using query parameters:
We don't currently support query parameters as part of the hash
fragment, though this is something that's been discussed frequently
internally and is on the feature request list.
They advise to use a plugin like:
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
https://github.com/azicchetti/jquerymobile-router
However, there is a workaround since the data-url of the active page in the DOM DOES change, you can retrieve this with $(".ui-page-active").attr("data-url"); I've tested this on your website and it gave me all 3 uniques URLs
jQuery Mobile by default does not allow passing query-string parameters to internally linked pages. Check-out the very bottom of this documentation page (the second bullet from the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html
jQuery Mobile does not support query parameter passing to
internal/embedded pages but there are two plugins that you can add to
your project to support this feature. There is a lightweight page
params plugin and a more fully featured jQuery Mobile router
plugin for use with backbone.js or spine.js.
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.