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

Solution 1:

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.

<scriptsrc="jquery.js"></script><script>
  $(document).on("mobileinit", function () {
    $.extend( $.mobile, { 
      changePage.defaults.changeHash: false,
      hashListeningEnabled: false
    });
 });
</script><scriptsrc="jquery.mobile.js"></script>

Solution 2:

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.

Solution 3:

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