CODEWITHSUNDEEP
javascriptjqueryhtml
newbie
newbie

Reputation: 55

How to get and change url when using jQuery.load

I want to change the url according to the menu pages, so to easily share a link to someone else, since each page has its own url name.

So, I have a function that loads the file content. But how to implement it with the url change also into the function?

<script>
    function getfile(data) {
        var file= data+'.html';
        $('#content').load(file);
    }
</script>

Here is the navigation using onclick function.

<ul>
    <li><a href="#" onclick="getfile('profile')">Profile</a> </li>
    <li><a href="#" onclick="getfile('about')">About</a> </li>
    <li><a href="#" onclick="getfile('contact')">Contact</a> </li>    
</ul>


<div id="content"></div>

Upvotes: 0

Views: 3674

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

You could use the History API. The pushState method will allow you to change the current page's URL, without reloading the content.

Example:

<script>
    function getfile(data) {
        var file= data+'.html';
        $('#content').load(file);
        history.pushState(null, null, file);
    }
</script>

You may also be interested in the popstate event, to detect when the browser travels back to the previous pages.

Update:

In order to load files for a sub directory, you will need to know the path to the root directory for the site. Something like the following will work if the site is at the root directory.

<script>
    var rootPath = '/';
    function getfile(data) {
        var file= rootPath+data+'.html';
        $('#content').load(file);
        history.pushState(null, null, file);
    }
</script>

Upvotes: 1

Related Questions