Display Proper URL in Address Bar

Question

I'm using Jquery/Ajax to load html pages into a div on my website. I get links certain class to open up in the specified div. When doing this the address bar remains www.example.com. Due to the fact that I do have several pages that I will like to be able to share; so when people visit the links it will take them to the website but with the specific page loaded into the div container.

Here's a few lines of my code

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/promo.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
    });
});



$('.menu_nav') .click (function () {
    var href = $(this) .attr('href');
    $('#contentarea').hide() .load(href).slideDown( 'very slow' )
    return false;
});

`var href = $(this) .attr('href');` is there supposed to be a space in between? — aug, Feb 01 '16 at 23:55
Are you trying to load new `url` page on `div` on your page and update the link to new `url` on same page? — pratikpawar, Feb 01 '16 at 23:59
@aug jQuery will ignore the whitespace, although it's conventional to not include. — mark_c, Feb 02 '16 at 00:02

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

Unless the other pages are on your domain, you cannot do this. If the other pages are, see this StackOverflow question: Updating address bar with new URL without hash or reloading the page.

Here's the deal: since you are loading a new page and you want the URL of the browser to point to that page, you should just give users a link. They know how to use the back button. (You could use the information in the linked answer to to change the URL to something like this: http://www.trillumonopoly.com/other-website.com.)

edited May 23 '17 at 12:04

Community

1
1

answered Feb 01 '16 at 23:55

Jacob Brazeal

654
9
16

yess All the pages are on my server So It should be doable. – Trillumonopoly Inc Feb 02 '16 at 00:08

score 0 · Answer 2 · answered Feb 02 '16 at 00:10

0

You can use the history object.

$('#contentarea').html(content);
history.pushState({url: "pages/promo.html"}, "", "pages/promo.html");

With the use of the state {url: "pages/promo.html"} you can load your page into your div when your users navigate back/forward.

$(window).on("popstate", function(e) {
    if (e.originalEvent.state != null)
    {
        // AJAX load e.originalEvent.state.url
    }
})

answered Feb 02 '16 at 00:10

gre_gor

6,669
9
47
52

where do I put this on every page or the main page that the other pages are being loaded into? Or Do I just replace the top part of my script that I posted with this – Trillumonopoly Inc Feb 02 '16 at 21:15

Display Proper URL in Address Bar

2 Answers2