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
Related
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 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 am using $.mobile.changePage() to change move from a login page to a home page. From there, none of the links on the home page work. Those links are all using the standard href link. I tried just using an href="" link for the login button as well and that works but the problem is, once the login button is clicked, I need to do some sort of login process to make sure that they entered in the right stuff and as far as I know, the href just happens immediately and I cannot make it wait or stop all together. I tried using the event.preventDefault() but that would not stop the href from switching the page before the login checking was done. Anyone have any ideas on how to solve my situation? I am pretty new to jQuery Mobile so I dont fully understand every detail about it yet. Also I am working with some legacy code at the moment and that code uses jQuery mobile alpha 4.1.
How are you checking for the data from the login page? If you are only using javascript, you could just add an onClick() handler on the login button, and get the values from the fields with document.getElementByID(). AFTER that you could do $.mobile.changePage().
Or maybe I don't understand what you are trying to do.
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.
I am using JQuery mobile in asp.net web form website. I have the following code at the page "pageA.aspx".
View Saved Orders
When I am clicking on this link I am successfully redirected to the PageB, but the URL I am getting is
http://localhost:3244/MyFirstJQueryApp/PageA.aspx#PageB.aspx
But I want URL like this further processing, please help
http://localhost:3244/MyFirstJQueryApp/PageB.aspx
I have done it by setting target="_top" property.
Is this a good practice ?
There are a couple of mods out there (can't find the one I wanted) to remove the hash in the URL, but you have to edit the jQM framework.
You could try using the changePage() http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html and set the transition without tracking it in history option to true (I think it's true)
Here is some more documentation on navigation as well: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
mightbe able to think of another way
The idea behind jQuery Mobile is that you don't do it the way you're trying to do it! Check Dynamic pages with jQuery Mobile, which shows you how to let jQm do the work in the background by loading new data into the DOM.