Using ajax to fetch subpages, how do I also change the url?

Question

I have a complete page with a menu like this:

<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>

and so on. This is working just fine without jQuery but because I would like some animation effects on side change I decided to use jQuery, like:

$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        $('#wrapper').load(link+' .content');
    });
});

By using this jQuery, an exact representation of page1.html, page2.html is reconstructed, but with ajax requests instead. My problem here is that I of course would like the url in the web browser to change accordingly. Now it just says "www.mypage.com" when I would like it to show "www.mypage.com/page1.html" when the first link is fetched with ajax. How can I achieve that?

JotaBe · Accepted Answer · 2015-05-01T11:29:40.707

1

If you change the URL that way, it will reload the whole page from the server, and that's not what you want to do.

What you want to do it's an SPA. To do so you can only change the anchor part of the URL, i.e. add a hash followed by whatever you want, for example:

www.mypage.com#page1
www.mypage.com#page2

Usually, apart from changing the url, you want to change the page content if the URL changes. This is knwon as routing, and most frameworks like Ember.js, Backbone, AngularJS, Durandal and so on include one. As you don't need a framework, you can use an independent one like router.js. Better than router documentation itself, look for some examples like this.

edited May 01 '15 at 11:29

answered May 01 '15 at 11:17

JotaBe

38,030
8
98
117

I see. But if I do it this way, with the anchors, how should I handle the google results? Google might still be linking to www.mypage.com/page1.html while someone blogging about my page would link to www.mypage.com#page1. From a SEO point of view, is that a problem? – rablentain May 01 '15 at 12:36
@theva Please, see this Q&A: http://stackoverflow.com/questions/18530258/how-to-make-a-spa-seo-crawlable – JotaBe May 04 '15 at 07:54
@theva There are also information on Google Developers, like: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started and https://support.google.com/webmasters/answer/174992?hl=en – JotaBe May 04 '15 at 08:43
Nice, I will look into that! How about pushState, is there some drawback with that method over this? – rablentain May 04 '15 at 09:35
The only problem with pushState is that older browser doesn't support it. If you know the browsers and versions that you want to support, you can use pushState. See this for reference: http://caniuse.com/#search=pushState – JotaBe May 04 '15 at 09:49
I see, that is not really a big problem for me I think. How about crawlers, like googlebot, does that support it? – rablentain May 04 '15 at 09:50
Regarding the crawlers there is no difference between both techniques: in both cases you have to do exactly the same kind of things to expose the AJAX urls to them. If you don't have problems with browser compatibilty, you can use whichever method you prefer. – JotaBe May 04 '15 at 09:55

score 0 · Answer 2 · answered May 02 '15 at 07:42

0

I found out the javascript method pushState, with that you can just do:

$('a').click(function(){
    var link = $(this).attr('href');
    window.history.pushState(null,null,link);
});

and the web browser link is updated correctly. This seems to work in all modern browsers except IE9 I think. With this method I get exactly the same url as if the page was served static, which is a huge advantage in my opinion.

answered May 02 '15 at 07:42

rablentain

6,641
13
50
91

That's a solution, but you must not forget that you also have to change your server to always load the "root page", and use the pass the url info to the page JS so that it can load the required data using AJAX. If you use the url hash it's much easier to keep in the same page, and trigger the AJAX loading. Take into account that, if the user changes the url manually in the address bar, it will trigger a get to the server, and the page will be reloaded. That doesn't happen if you use hashes. Please, use google maps (push state) or gmail (hash) and see what happens if you change the url in each – JotaBe May 04 '15 at 10:08
In my case I don't use ajax load if a subpage is directly visited. PHP is serving exactly the same page on www.mypage.com/page1 as if it would be loaded with ajax (which happens if a user is navigating to page1 through the menu). You have a good point anyway, I will look into maps and gmail as well. – rablentain May 04 '15 at 10:12

Using ajax to fetch subpages, how do I also change the url?

2 Answers2