jQuery Mobile, navigation with query strings - javascript

In my jQuery Mobile project, I have a page that shows a slide's content. The content is dependent of the query string.
On opening of the first slide by visiting #slidePage?sec=0&page=0 -> It works
On the same slide page I have a link for #slidePage?sec=0&page=1 ( the second page). --> this link doesn't work
Seems that the browser or jQuery is convinced that it is the same page and do not navigate .
What can I do ?
I tried to disable ajax but that didn't work.

#Cameron Askew has just released a brilliant JQuery (Mobile) plugin that enables you to send QueryString parameters between pages:
https://github.com/CameronAskew/jquery.mobile.paramsHandler

Query strings (to internal pages) are not supported by jQuery mobile.
There are a number of jQuery mobile plugins that could be useful to enable this feature.
See:
http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

You can do this just with jquery mobile. On pagebeforeshow simply read the data-url attribute that jquery mobile adds to the page. Then just add the code to do what you need to do with the querystring.
This will only work with Ajax navigation rather than multi-page.
Show page "two" querystring id=1
<script type="text/javascript">
$('#your-page-id-here').on('pagebeforeshow',function(){
console.log($(this).data("url"))
});
</script>

Related

Resetting css on load when using jQuery Mobile

I'm using jQuery Mobile on a responsive site mainly for a pop up menu. I've noticed that with this library you automatically get stuff like animations throughout the site.
The disadvantage is that I have special styles for different pages. Say I type in a link to go to the "bio" page, everything loads fine and the same is true for the "roster" and "about" pages. However, when I try to go to another of the pages (say from "bio" to "about" by using the site's menu) the current page retains the styles from the previous page and just swaps out the html content.
How do I keep using jQuery mobile but have each page load styles as intended and (if possible) keep the transitions?
Here are links to the actual pages so you can understand what I'm saying;
http://ramiroproductions.businesscatalyst.com/roster.html - Roster
http://ramiroproductions.businesscatalyst.com/aboutus.html - About
http://ramiroproductions.businesscatalyst.com/biography.html - Bio
You can try refreshing them to understand how they're supposed to look.
Make sure your user-written styles are included after the jquery mobile css to follow rules of cascading and specificity of style declarations. So try first to put the link to your stylesheet AFTER the jquery mobile css stylesheet. If that alone doesn't work, use the browser inspector to check which styles are overriding, and write those styles exactly in that format into your stylesheet.
I've discovered this is because jQuery mobile handles links through ajax. Disabling it solves this issue but you loose the page transitions.
Refer to this question for more info:
How To Disable Ajax In jQuery Mobile Before Page Load?

Preventing Jquery Mobile from processing URL hash?

I'm using Jquery Mobile in an existing web application. The problem is, Jquery Mobile is processing all URL hashes. For example:
mysite.com/#foo
Here, the hash 'foo' is being sent to Jquery Mobile, and it is processing it, instead of letting my non-jquery mobile code process it.
Is it possible to prevent Jquery Mobile from interfering with the url hash?
The default behavior of jQuery Mobile is listening to hashchange event and updates URL hash in order to handle history of pages, only when Ajax is enabled.
To handle pages linking, both changeHash and hashListeningEnabled properties should be disabled on first run mobileinit. This event fires before loading jQuery Mobile library and .ready(); it should be used to change Global Settings of the framework.
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.extend( $.mobile, {
changePage.defaults.changeHash: false,
hashListeningEnabled: false
});
});
</script>
<script src="jquery.mobile.js"></script>
Have you considered encode/decodeURIComponent to "hide" your hashes from JQM?
I'm not using it directly for hashes, but I need me own logic for processing links like this:
./foo/index.html#document/subfolder/items?sort=descending
which JQM will does not allow currently because slashes and query params after a hash are ignored (params) or added to the folder path (/foo/subfolder/items/).
However doing this:
./foo/index.html#document%2Fsubfolder%2Fitems%3Fsort%3Ddescending
goes unnoticed by JQM.
Should also work for the hash.
You should use data-url for this.
See this article
<a data-identity='cat5' data-url='?cat=5' href='javascript:void(0);' >listitem text</a>
A bit old but still should work

Jquery mobile navigation model

I am building a mobile site and I am using the jquery.mobile library. I am facing problems wrt how jquery.mobile is handling the navigation. It is using ajax for all navigation calls and replacing the DOM.
I want normal postbacks and do not need the ajax method.
also, there is a loading <div> on all the pages at the bottom. I do not want that. I know its something to do with the ajax request method.
does anyone have any experience with it? thanks a lot.
Amit, it is not true that jquery mobile uses ajax for all navigation. You can manually navigate between pages programmatically via
$.mobile.changePage('#newpagediv');
You can have multiple pages in the html, preloaded and navigate via button click
<div id="first" data-role="page">
Go to second
</div>
<div id="second" data-role="page">
</div>
Try disabling it in the $.mobile settings like:
$.mobile.ajaxLinksEnabled = false;
The JQM Documentation actually specifies:
$.mobile.ajaxEnabled = false;
Or you could also specify
rel=external
directly on your tags to let JQM load the page "normally" and without ajax.
PS: note that in this case the whole JQM will need to re-initialize (as well as your code) on each new page load.

jQuery Mobile linked list pageInit(), not $(document).ready()

I'm trying to make a mobile version of a web page. My problem is that I have to manipulate a accordion menu to use jQuery mobile linked list. To do this I manipulate the menu with jQuery ex:
$(document).ready(function() {
$('#globalMenu').attr("data-role", "listview");
.. .. . . ..
});
It works great if I load the page first time, but when I navigate in the jQuery mobile list and push one of the link the script do not run, but if I refresh the page (f5) it works! I've read that I have to use init instead of document ready but I can't manage it to work.
Please write some examples.
jQueryMobile event page
Supposing your page div is like this:
<div id="my-page" data-role="page">
Try with:
$('#my-page').live('pageinit', function(event){
$('#globalMenu').attr("data-role", "listview");
});

jQuery Mobile: AJAX response only embeds first <div data-role="page">

I'm working on a small page/app with jQuery Mobile.
The home page (at / and /m/home) contains a link to /m/activity. This one works just fine, the URL hash changes to #/m/activity and the right content is shown.
Now /m/activity contains two <div>s with data-role="page". The first <div> contains a link with href="#activity-location-query" where activity-location-query is the id of the second <div>. The issue I'm running into is that jQuery Mobile does not embed the second <div> into the DOM as revealed by the usual developer tools.
The link works fine when going to /m/activity directly, but jQuery Mobile tries to request /activity-location-query when clicked on #/m/activity because the <div> with id="activity-location-query" has never been embedded into the DOM.
What I'm trying to accomplish is separating different sections of the app into separate template files and such. However, some of these need additional dialogs (like #activity-location-query in /m/activity) and I'd like to be able to return those from the server together with the "main" page (I may opt to use data-rel="dialog" later).
You can look at the live page at http://www.blitzortung.mobi. I'm using jQuery 1.5.2 and jQuery Mobile 1.0a4

Categories

Resources