How can I load different html pages without refreshing, but changing the url?
Hi, I'm trying to use a navigation system for a website where there is no refresh at all, through jQuery, I don't know if using ajax is possible, but I'd prefer that approach, however, this is what I have so far:
jQuery script
- $(document).ready(function(e){
-
- var page;
- var prevPage;
-
- $('ul#nav li a').click(function(){
-
- prevPage = getPrevUrl(window.location.href);
-
- page = $(this).attr('href');
- $('#content').load(page + '.html');
-
- if(page + '.html'!= window.location){
- window.history.pushState({path:page + '.html'},'',page + '.html');
- }
-
- return false;
- });
-
- });
HTML
- <body>
- <ul id="nav">
- <li><a href="dynamicLoad_TEST2"><b style="color:white;">Click here 1</b></a></li>
- <li><a href="dynamicLoad_TEST"><b style="color:white;">Click here 2</b></a></li>
- </ul>
- <div id="content"></div>
- </body>
It works, and it changes the url, the called page is loaded into the div, however, the back button in the browser does not work, and I think there's a better way by using ajax, but I don't know how to start, I've seen a few tutorials using ajax and php, and the returned data is being sent using echo, but if I do it with only html, I don't know how to return the html to ajax. I will appreciate any help, thanks!