I have 3 buttons
<div onclick="javascript:newmessage()" class="mailcontents">New Message</div>
<div onclick="javascript:inboxmails()" class="mailcontents">Inbox</div>
<div onclick="javascript:sentmailsbox()" class="mailcontents">Sent</div>
and the divs where the content has to be displayed
<div id="inbox"></div>
<div id="sent"></div>
Onclick of each I am changing the content by calling the respective functions
var times = 0;
function inboxmails(){
times++;
location.hash = times;
$('#inbox').empty();
$('#sent').empty();
$('#newmessage').empty();
$.ajax({
success: function (data) {
$('#inbox').append('inbox data');
}
});
}
function sentmailsbox(){
times++;
location.hash = times;
$('#inbox').empty();
$('#sent').empty();
$('#newmessage').empty();
$.ajax({
success: function (data) {
$('#sent').append('sent data');
}
});
}
function newmessage(){
$('#inbox').empty();
$('#sent').empty();
$('#newmessage').empty();
$.ajax({
success: function (data) {
$('#newmessage').append('new message data');
}
});
}
I have also added hashing which adds hash tag and a numberical value to the url
Here is the plunker code https://plnkr.co/edit/tTMzTFIHD03pkIt4CkHO?p=preview
But when I click on the back button of browser it must reload the previous ajax content. i.e, if I click on inbox, it displays inbox data and next I clicked on sent, it displays sent data, and then when I click the browser's back button it must display inbox content inbox data i.e, the previous content.
I understood how to change a url using hashing. But I am unable to understand and also could not find a proper example to pushstate i.e push history back / display the pervious ajax content.
I have checked various examples. But I am not understanding how to go to load ajax content using hashing.
Please help !!! Thanks in advance !!!
