Understanding Jquery SPA Implementation

Question

I'm trying to create an SPA website with JQuery. I know how to use history.pushState and $(window).on('popstate') but i have a few questions. Currently i have a router.js file which handles the popstate event and the navigation links. I place the links in a custom attribute(data-navId="templates/page/page.html") or in href and handling it with $(e).preventDefault(); . User clicks the link and $('.page-content').load('url', function() {}) and history.pushstate are executed.

1) Am i forced to include the router.js file containing these functions in every template? I want one html which contains these functions only. The templates should only contain HTML and their corresponding scripts. I managed to accomplished that but if the user refreshes the page the template shows without styling or anything. Is using a hash the answer? Or if the user closes the browser and have the "Restore previous pages" option activated the template will be load with its html only.

In the past i developed SPA pages without hash using only popstate and history.pushState but i had to include all the html on each file and then calling $('.page-content').load(url + ' .page-content > *', function() {}); to avoid the refresh bug.

I also know that facebook uses popstate for modern browsers and hashchange for older perhaps by including Modernizr.js or some custom library. But how the router works without including it in every template?

Thanks in advance.

Answer 1

I found it! I was missing the main code of the router which is to retrieve the current url get the parameters with regex(or any other way) and load the content dynamically. Also i made the mistake of pushing the full path of requested template(page to inject) instead of handling it like a query string or via mod_rewrite(Apache).

Source (query string): https://stackoverflow.com/a/901144/6128301

To sum up: 1) User clicks link, the following code is executed:

$('url').on('click', function(e) {
   e.preventDefault();

   var url = $(this).attr('href');
   $('.injection-container').load(url + ' > * ', function() {

      history.pushState({'state': "index?p=" + url}, "Injected Page's Title", "index?p=" + url);

   });

});

e.preventDefault = Prevents default link(a href tag) redirect. injection-container = the page you want to load the content to

url + ' > * ' = the content to get. Asterisk stands for all elements. You can also load the injected page's main content by using: url + ' > .injection-container > * '

Index is the main page which holds all the CSS and JS. You should also create a router.js file which checks the query strings and decides which page will be loaded dynamically. Notice that there is no .html extension on it because i configured my apache using mod_rewrite to clear the extensions. Alternatively, you can replace the extension by getting the url (window.location.href ).

The last thing you need is this code:

$(window).on('popsate', function() { // PageInjector function like before... })