How to remove URL part or hash without refreshing?

Question

I've a jQuery mobile multi-page template structure.

I need to redirect the example.com/contacts page requests to #Contact page

I'm able to do this via but the final URL now looks example.com/contacts#Contact

I need either example.com/contacts or example.com/#Contact

If I tried to remove the hash by setting window.location.hash=""; it will be redirected to default Home page.

How can I remove the #Contcat or contacts from example.com/contacts#Contact?

You're probably looking for the [HTML5 history API](http://diveintohtml5.info/history.html). It only works on newer browsers though - older ones will have to use hashtags instead, and you cannot change any part of the URL except for the hashtag (without HTML5), without reloading the page (security reasons). [history.js](https://github.com/browserstate/history.js) is a good cross-browser solution. — h2ooooooo, May 27 '13 at 07:49
I don't think it's possible. You can find more details in this [discussion][1]. [1]: http://stackoverflow.com/questions/4508574/remove-hash-from-url — Ted, May 27 '13 at 07:51
check out [this answer](http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh#answer-5298684) on SO and the [demo](http://jsfiddle.net/AndyE/ycmPt/show/) attached. — Mithun Satheesh, May 27 '13 at 07:59
You can do it using `$.mobile.changePage('url', { changeHash: false } );` http://api.jquerymobile.com/jQuery.mobile.changePage/. URL or #pageID. — Omar, May 27 '13 at 08:17

Gajotres · Accepted Answer · 2013-05-27T08:30:42.250

Solution 1

It can be easily done if you handle your page changes like this:

$.mobile.changePage("#second", {transition: "slide",reverse: true,changeHash: true});

Basically you want to have changeHash set to false.

Working example:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script>
        $(document).on('pagebeforeshow', '#index', function(){       
            $(document).on('click', '#change-page', function(){   
                $.mobile.changePage("#second", {transition: "slide",reverse: true,changeHash: false});        
            });    
        }); 
    </script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <div data-role="button" id="change-page">Change Page</div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

Solution 2

If you don't want to handle it programatically you can made a slight change to your jQuery Mobile js file. First download uncompressed jQM js file and open it. I am talking about current version 1.3.1).

Look for a line 4730, but because this code changes from day to day if it is not in taht line then look for this code segment:

$.mobile.changePage.defaults = {
    transition: undefined,
    reverse: false,
    changeHash: true,
    fromHashChange: false,
    role: undefined, // By default we rely on the role defined by the @data-role attribute.
    duplicateCachedPage: undefined,
    pageContainer: undefined,
    showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
    dataUrl: undefined,
    fromPage: undefined,
    allowSamePageTransition: false
};

change it to :

$.mobile.changePage.defaults = {
    transition: undefined,
    reverse: false,
    changeHash: false,
    fromHashChange: false,
    role: undefined, // By default we rely on the role defined by the @data-role attribute.
    duplicateCachedPage: undefined,
    pageContainer: undefined,
    showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
    dataUrl: undefined,
    fromPage: undefined,
    allowSamePageTransition: false
};

Notice, the difference is:

changeHash: false,

When you do it find some online tool and compress this js file.

I'm aware of the `changeHash: true` thing, Issue is that I'm already in the `#Contcat` page and I just want to silently remove the hash — Mithun Sreedharan, May 27 '13 at 08:28
So what is the point, this will remove the hash? Take a look at my other solution. And I would advise you from manually changing it, you can cause more problems. — Gajotres, May 27 '13 at 08:32

How to remove URL part or hash without refreshing?

1 Answers1

Solution 1

Solution 2