0

I'm at my very first steps with jquery.I've got an index.php file which includes:

  • header.html

  • indexview.html

  • footer.html.

Into the indexview.html file there are two divs. One on the left (a menu) and one on the right(div id="content"). Whenever I click an item on the left menu, jquery is responsible to load other html pages(and eventually fetch data from the DB thanks to ajax) INTO the right div (div id="content"). I'm really liking this kind of approach, but the problem is that if, for example, I load:

  • Photo.html

  • Contacts.html

  • Info.html

Into the main div (the right one: div id="content") and then I press the back arrow, it just brings me to index.php with the indexview.html page loaded (instead of showing me contacts->photo->indexview).

I've already did some searches on the web and find out that I should build something that fetches the url thanks to the event handler "popstate". I've already dig a bit into that or into a little framework that can let me handle all of that, but, still I'm not fully understanding what I am supposed to do. The items on the left are NOT "<a> links" and don't have href attributes of course. Do I have to substitute every item (now a li item) with an <a> element? If so, how do I proceed to make the history work as I wish?
P.s. Of course, every time I load something into my right div (being photo.html,contacts,html etc) my url does NOT change.

Here is a little jsfiddle (not sure if it can help: doubt that). Clicking on whatever item in the menu makes jquery load() an html page in the right div ("overriding" the div where you "find Welcome, this is the integrated information management system web interface of the ...etc!").

http://jsfiddle.net/5by64tsn/

   $("#listContact").click(function(){
    $("#content").load('view/contacts.html');
    document.title = 'Contacts';
});

When I click listContact, the contacts.html is loaded into the content div.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
smart548
  • 41
  • 7
  • I am not sure if I follow 100% but from what I understand is basically you want to track what should be loaded depending on what you have clicked. I suggest keeping track of it using #something in your url. Maybe if you make a jsfiddle I may be able to give you a better solution. – Chris Nov 30 '15 at 16:17
  • Check out this tutorial, https://css-tricks.com/rethinking-dynamic-page-replacing-content/ – Wesley Smith Nov 30 '15 at 16:18
  • I've added a jsfiddle. The point, DelightedD0D is that when clicking and loading a div I'm not updating the url.. – smart548 Nov 30 '15 at 16:33
  • Seems like you want to control the function of the Back button, something like this? [Link](http://stackoverflow.com/questions/18211984/how-to-control-back-button-event-in-jquery-mobile). To keep track of everything you would need to create a stack for the pages the user has chosen, that's what they meant by popstate. – pedrotorres Nov 30 '15 at 16:34
  • Basically you would control what the back button does and depending on the latest item in the pop, you would do something different inside that function that overrides the default Back function. – pedrotorres Nov 30 '15 at 16:35
  • When navigation the site, the back button is not clickable, if not when I click to open a form to upload a pic. So, I'm not able to navigate the site with the back and forth button...How to implement that? – smart548 Nov 30 '15 at 16:40

1 Answers1

1

What you're hoping to accomplish isn't how Ajax/browser history stuff works. Ajax calls are independent of the browser's history and do not affect the back/forward buttons without adding code to do so. You've mentioned popState, which is close to what you want. You actually want pushState. 

// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);

Using your example:

$("#listContact").click(function(){
    $("#content").load('view/contacts.html');
    document.title = 'Contacts';
    window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});
Jeffwa
  • 1,143
  • 10
  • 12
  • That makes the back button become clickable but it's still not working as it should: it doesn't bring me to the "prevoius page". If i am on "contact", then i go to "photo" and click the back button nothing happens. The url changes but that's it. Thanks for the tip anyway ;) – smart548 Nov 30 '15 at 16:54
  • I cannot do that cause the contacts.html is not the "entire page". It's just what goes into the div.. – smart548 Nov 30 '15 at 16:55
  • What you're looking for then is exactly what DelightedD0D linked to. The benefit of changing the url means the user can still bookmark a specific page. – Jeffwa Nov 30 '15 at 17:27
  • I know, but still that makes no sense, cause the page I'm loading is not an entire page, but just some html put inside a dive. My contacts.html page doesn't have the header,the menu,the footer. I don't wanna put all that stuf inside it because it would make no sense. The great thing about using "load()" is that you don't have to reload pages everytime you click something... – smart548 Nov 30 '15 at 22:27