CODEWITHSUNDEEP
javascripturljquery-mobile
jcsmnt0
jcsmnt0

Reputation: 973

How to stop jQuery Mobile from doing anything with window.location?

Basically, I want to handle hash listening and everything in my own code, but I can't get jQM to stop listening to hash change events and generally mucking about with the URL. I've tried the code from their documentation:

$(document).bind('mobileinit', function() {
    $.extend($.mobile, {
        hashListeningEnabled: false,
        pushStateEnabled: false,
        ajaxEnabled: false,
        linkBindingEnabled: false
    });
});

The mobileinit event doesn't ever get fired on the first page load though (even though it seems like it should), so that doesn't work for me. What does get the code to execute is putting it in $(window).bind('load'), and I can verify in the Firebug console via $.mobile.hashListeningEnabled === false that the values are getting set properly in there - but, they don't seem to do anything! When I enter, say, <mysite>/index.html in the address bar, it loads my default page, but if I enter <mysite>/index.html#anything it just shows the jQM loading spinner and never loads anything (I presume because it's looking for a page with data-role=anything inside the file, which is its default functionality). Additionally, the pushStateEnabled override evidently isn't working either, since if I run window.location.hash = /somethingelse.html the URL bar in any supported browser shows http://<mysite>/somethingelse.html, instead of the expected http://<mysite>/index.html#somethingelse.html.

Basically, what I want is for jQuery Mobile to handle page layout and DOM manipulation, and absolutely nothing else. Is this possible?

Upvotes: 3

Views: 1091

Answers (1)

John Kalberer
John Kalberer

Reputation: 5790

I do not know if these are the correct properties to be setting (did not check the documentation) but I had this issue before. To solve it you need to bind the event before you include the script so this:

<script type="text/javascript">
    $(document).bind('mobileinit', function() {
        $.extend($.mobile, {
            hashListeningEnabled: false,
            pushStateEnabled: false,
            ajaxEnabled: false,
            linkBindingEnabled: false
        });
    });
</script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

The reason you must do this is that the mobileinit event fires when the jquery mobile file is loaded.

Upvotes: 4

Related Questions