History.js - sharing link of a AJAX loaded page

Question

I have the following function that activates when I click on some links:

function showPage(page) {
    var History = window.History;
    History.pushState(null,null,page);
    $("#post-content").load(page + ".php");
}

The content of the page updates, the URL changes. However I know I'm surely doing something wrong. For example when I refresh the page, it gives me the Page Not Found error, plus the link of the new page can't be shared, just because of the same reason.

Is there any way to resolve this?

Answer 1

It sounds like you're not routing your dynamic URLs to your main app. Unless page refers to a physical file on your server, you need to be doing some URL rewriting server-side if you want those URLs to work for anything other than simply being placeholders in your browser history. If you don't want to mess with the server side, you'll need to use another strategy, like hacking the URL with hashes . That way the server is still always serving your main app page, and then the app page reads the URL add-on stuff to decide what needs to be rendered dynamically.

Answer 2

You need to stop depending on JavaScript to build the pages.

The server has to be able to construct them itself.

You can then progressively enhance with JavaScript ( pushState + Ajax) to transform the previous page into the destination page without reloading all the shared content.

Your problem is that you've done the "enhance" bit before building the foundations.