1

This is simple but I have not found a solution in the last 8 hours of search.

What I need is to implement the history push state from jQuery but I have no idea how to.

I have tried to understand how to use history.js and other codes but they seem way to complicated.

Is there a simple solution for this or am I just still too amateur?

Features I need: Url change without the content. Back and foward button without losing the ajax call.

I have the following codes:

As JS I have:

<script> $(document).ready(function(){ $("#module").load("module.php?module=home"); $("#home_button").click(function(){ $("#module").load("module.php?module=home"); }); $("#account_button").click(function(){ $("#module").load("module.php?module=account"); }); $("#raul_button").click(function(){ $("#module").load("module.php?module=profile&user_url=raul"); }); }); </script>

As HTML I have:

<button id="home_button">HOME</button> <button id="raul_button">RAUL PROFILE</button> <button id="account_button">ACCOUNT</button> <div id="module"></div>

HTACCESS

RewriteRule members(.*)\.aspx$ /?module=profile RewriteRule ^([^/]*)\.aspx$ /?module=$1 [L] RewriteRule ^([^/]*)\.html$ /index.php?module=profile&user_url=$1 [L]
Improve this question
2
  • 1
    If you are OK with only supporting modern browsers ( caniuse.com/#search=pushstate ) then you can easily use function: window.history.pushState(null, null, '/home-link); Commented Jul 15, 2014 at 12:43
  • iMakeWebsites, this is the answer I would choose as the one I needed. Commented Jul 15, 2014 at 14:18

2 Answers 2

Reset to default
2

I recommend using normal links and not buttons. Let's not make things more difficult than they need to be!

First you need to capture all clicks on links. Inside this, some of the magic takes place.

$(document).on('click', 'a', function(event) { event.preventDefault(); var href = $(this).attr('href'); // what page are you getting? $.get(href, function(data) { $('#module').html(data); var current_page = $('html').html(); // add an item to the history log history.pushState(current_page, event.target.textContent, event.target.href); }); });

You also need to make sure that if you go to your URL you save the content to the history, just in case you need to go backwards in history.

var current_page = $('html').html(); // Store the initial content so we can revisit it later history.replaceState(current_page, document.title, document.location.href);

Finally, catch all state changes ( when the back or forward button is pressed ).

// Revert to a previously saved state window.addEventListener('popstate', function(event) { console.log('popstate fired!'); $('html').html(data); });

I compiled this code from multiple SE answers already out there on this subject when I needed to do a little project on this. History.js seems very overwhelming, but you can essentially use the same exact code as this, but replace history with History.

Also, I recommend loading the content in specific divs and using fadeIn / fadeOut effects for a better user experience! (see http://usatoday.com)

note: this code isn't 100% perfect and ready for launch, so adjust as needed. As you play with it you will likely notice that changing some of the code will better help your cause.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for this awesome elaborated guide, I will test it once I get a chance and come back with the results.
I just decided to follow your recommendation of using href instead of JavaScript for links because of it's SEO impact. The history part of the code would be useful but I tried to implement it and it does not work, probably an error on my part, will research more.
@べがらう what specifically doesn't work? none of it at all?
It just changed the url, I put in a new code that is working well, except that forward and back navigation is broken, it just changes the url when pushing back and forward. <code> $("#home_button").click(function(){ $("#module").load("module.php?module=home"); window.history.pushState(null, null, '/home.aspx'); document.title = 'UrbanRanks | Home'; return false; }); </code>
@べがらう You need to put the code you want to be restored to the page inside the first parameter of the pushState. I recommend just grabbing the entire page HTML for starting. You can fool around after, once you get it to work.
1 
$('a').on('click', function(){ var pageurl = $(this).attr('href'); if (pageurl != window.location){ window.history.pushState('', '', pageurl); } });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.