CODEWITHSUNDEEP
javascriptjquery
Shawn Mclean
Shawn Mclean

Reputation: 57469

Ajax url navigation

I'm trying to make something similar to GitHub that loads content based on the url.

I saw this article, but I do not want to use a plugin. I would like to write my code manually.

One article I saw here, they kept checking the document.location.hash for any changes, then load the content. Is there a better way to achieve this?

The following are what Im thinking about:

  1. Load content on page load.
  2. Load content on url change.
  3. Change url from anchor tag without reloading page.
  4. SEO.
  5. Back button.

Upvotes: 1

Views: 904

Answers (3)

mu is too short
mu is too short

Reputation: 434695

Some browsers support a hashchange event and a window.onhashchange event handler:

The hashchange event fires when a window's hash changes (see location.hash).

but some don't, the timer hack is used for browsers that don't have a hashchange event.

Your best bet is to grab an existing plugin or library and figure out how it works, that should help you get past the various browser hacks and special cases:

Upvotes: 3

user2752173
user2752173

Reputation: 499

I've found this on a "codeigniter" similar question, but should answer your question.

CodeIgniter + jQuery(ajax) + HTML5 pushstate: How can I make a clean navigation with real URLs?

This is a pretty light solution: https://github.com/cairo140/html5-history-example

Check the demo here: http://cairo140.github.io/html5-history-example/one.html

Hope it can help

Upvotes: 0

Mick Hansen
Mick Hansen

Reputation: 2694

If you want some resemblance of SEO you still need real links, and then replace the click events with some javascript that utilisies https://github.com/browserstate/History.js this. Then you just setup the events so it loades via AJAX on History triggers.

The History.js script i linked uses the new History api introduced in newer browsers, but will fallback if not supported.

On page reloads/first page loads, you might want to have the first content served from the server - so Google has some actual content to cache.

Upvotes: 1

Related Questions