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
Related
I have used the following script but it doesn't show the url of link.
add
<div id="right_side_contnet"></div>
$(document).ready(function(){
$('.loadpage').click(function(e){
e.preventDefault()
$('#right_side_contnet').load(this.href)
});
});
Ajax navigation can't simply change the browser history, and this is actually what you are looking for I suppose. This can be achieved by making use of history API introduced in HTML5 either by
Manipulating the history manually by the history API. MDN, html5doctor
Use well implemented third party libraries for manipulating history. I'd suggest pjax or history.js
Considering that the mobile app is not native, but made with phonegap (or something simmilar), i am wondering if there is a javascript / jquery library that i can use to navigate from one html page to another one without the need to reload all ls and css resources.
More or less like jQuery Mobile does it.
One issue would be enhancing all the ui and js widgets on each page
Any ideas?
You can do an AJAX call to whatever the local URL is and wrap the entire response in something traversable via jQuery, like...
// on click link ->
$.get('myUrl.html', function(response) {
var new_body, traversable;
traversable = $('<div></div>', {
html: response
});
new_body = traversable.find('body').html();
// code to replace your content here ...
});
And if you have a lot of scripts/styles running per page, you could traverse through the list of traversable.find('link') and traversable.find('script') to compare what has and has not been used yet. Then append to the document after replacing your markup.
I think it is Phonegap you are talking about.
Yes, Jquery mobile is would be a solution to your problem because whenever we change the page in Jquery Mobile, instead of reloading the whole DOM, it only replaces/inserts (depends on if you enable caching) the new page div to be shown.
Thus, all resources you included initially would persist and be usable in all pages.
Depending on how your html and css are written, you could wrap your pages in divs and use css transforms to position them off screen, then scroll them into view when the user clicks a link.
jQuery mobile inside of phonegap is very, very slow.
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>
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.
Regardless of whether I'm trying to go to index.html#ExistingAnchor or index.html#NotExistingAnchor or any other anchor which might or might not exist on the page I'd like some javascript function to be run.
<html>
<body>
<a name="ExistingAnchor"></a>
</body>
</html>
What javascript code can I use to achieve it?
The page may already be loaded so I'd be just visiting HTML anchors on the same page from the browser address bar without reloading the page.
Also, having visited a number of anchors on the same page when I'm using the Back and Forward browser history buttons, I'd like some JavaScript function to be run as well so that I could identify what anchor I'm currently on - could you please advise this as well?
On modern browsers you can implement onHashChange event, on IE6/7 you're going to need to use some trickery involving iFrames and window.setTimeout.
The jQuery history plugin will achieve what you want if you use jQuery, if not you can study it and port it for your needs.
http://tkyk.github.com/jquery-history-plugin/