CODEWITHSUNDEEP
jquery-mobile
Mark
Mark

Reputation: 876

Disabling location bar updates on anchor links?

When calling changePage() with changeHash = false, the location bar does not change. Can I have identical behavior with anchor links (e.g. <a href="#three">Blah</a>)? I set $.mobile.hashListeningEnabled = false, but the location bar is still updated. Thanks for the help.

Upvotes: 2

Views: 3417

Answers (4)

christian
christian

Reputation: 558

try it out: it works for me in jQM 1.4.5

$.mobile.hashListeningEnabled = false;

When applied then page changes does not alter the browser's address bar anymore, in the same way when using explicit calls to: 

$.mobile.pageContainer.pagecontainer("change","tosomewhere.html",{ changeHash: false });

Upvotes: 1

Abdullah Adeeb
Abdullah Adeeb

Reputation: 4306

Although I like Chad Brown's solution for this, I went with a much simpler and easier to grasp approach specially for people new to jquery.

so I start by creating a function script and can be placed anywhere with in your code, doesn't need to be in a specific handler or callback.

<script>

    function goTo(pageID,track){
         $.mobile.pageContainer.pagecontainer('change','#'+pageID, {changeHash: track});
    }

</script>

and then in my anchor tags I will do just call the function just like this

<a href="javascript:goTo('mypageID',false);">New Trip</a>

Upvotes: 0

Chad Brown
Chad Brown

Reputation: 1667

figured I'd answer this with a nifty block of code that you can put BEFORE you load jquery mobile AFTER you load jquery, adds the extra attribute 'data-change-hash' to any link tag so that the location does not change

    $('a[data-change-hash="false"]').on('click',function(e) {
        $.mobile.changePage($(this).attr('href'),{'changeHash':false});
        e.preventDefault();
    });

will enable you to do this

<a href='#my-page' data-change-hash="false">Test Me!</a>

and your url will stay like http://example.com instead of changing to http://example.com#my-page

Upvotes: 2

user700284
user700284

Reputation: 13620

This can be done by setting $.mobile.changePage.defaults.changeHash = false;

Sample code :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
        $(document).bind("mobileinit", function(){
            $.mobile.changePage.defaults.changeHash = false;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <a data-role="button" href="#page2">Go to page2</a>
    </div><!-- /content -->

</div><!-- /page -->

<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Upvotes: 6

Related Questions