How to utilize the browser back button with AJAX requested dynamic content - ajax

Question

I have asked a question like this before, and the answer was great but the more I looked at my code the more confused I got, and after 10hrs my brain is shot and I'm in need of help. So all my content is loaded dynamically via Jquery's $.post and loaded into #content-container. Now I included my entire Jquery file to show you why I am getting so confused as how to get this to work without re-writing all the code. As you can see, and what I'm thinking, is that the history plugins such as BBQ, and history.js seem to be out of the question because I don't use anchor tags and the multitude of .live('click', funcition() { I have use different classes and id's for various reasons. I also believe that rules out using the hash and linking it to a single class via .trigger(), executing the AJAX(hope that makes sense). The only option I have left is actually kinda my question. Would it be possible to load the dynamic content into #content-container still using the $.post with $.load() or window.location and actually have the previous content loaded when the browser back button is clicked.
I greatly appreciate the help, really.....
$(document).ready(function() {
$(window).load(function () {
});
$('#map').hide();
$('#informational-container').hide();
$('.clickable').click(function(){
$('#map').hide();
});
function getTotalDealCount() {
$.post('../service/service.getTotalDealCount.php', {}, function(data) {
if(data.success) $('#deal-counter').append(data.results);
}, 'json');
return false;
}
function loadMap(lat, lon) {
var latlng = new google.maps.LatLng(lat, lon);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
function getLatLon(address, zipcode) {
$.post('../service/service.getLatLon.php', { address: address, zipcode: zipcode }, function(data) {
if(data.success) {
var res = data.results;
var coordinates = res.split('_');
loadMap(coordinates[0], coordinates[1]);
} else {
return false;
}
}, 'json');
return false;
}
function getAddressZipcode(id) {
$.post('../service/service.getAddressZipcode.php', { id: id }, function(data) {
if(data.success) {
var res = data.results;
var location = res.split('_');
getLatLon(location[0], location[1]);
} else {
return -1;
}
}, 'json');
return false;
}
$('#how-it-works').live('click', function() {
$('#content-container').load('../module/module.string.php #string-m1');
});
$('#why-post-a-deal').live('click', function() {
$('#content-container').load('../module/module.string.php #string-m2');
});
$('#who-are-we').live('click', function() {
$('#content-container').load('../module/module.string.php #string-m3');
});
$('#contact-us').live('click', function() {
$('#content-container').load('../module/module.string.php #string-m4');
});
$('#post-deal-img').live('click', function() {
$('#content-container').load('post.php');
});
$('.post-deal-inputs').live('click', function() {
$('.post-deal-inputs').live('click', function(e) {
$(this).val('');
$(this).removeClass('post-deal-inputs')
.addClass('post-deal-inputs-clicked');
});
});
$('#df5').live('click', function() {
$('#df7').val('');
$('#df7').hide();
});
$('#df6').live('click', function() {
$('#df7').show();
});
$('#post-how-to-link').live('click', function() {
apprise();
});
$('#terms').live('click', function() {
$('#content-container').load('../module/module.string.php #string-m5');
});
$('#disclaimer').live('click', function() {
$('#content-container').load('../module/module.string.php #string-m6');
});
$('#post-deal-button').live('click', function() {
var dealForm = $('#deal-form').serialize();
var company = $('#df1').val();
var description = $('#df2').val();
var zipcode = $('#df4').val();
var starts = $('#df7').val();
var ends = $('#df8').val();
if(company == '' || company == 'Company') {
apprise('A company name is required!');
return false;
}
if(description == '' || description == 'Deal') {
apprise('A deal is required!');
return false;
}
var swear = swearFilter(description);
if(swear != false) {
apprise('Please remove the naughty word `' + swear + '` from your deal.');
return false;
}
if(zipcode == '' || zipcode == 'Zipcode') {
apprise('A zipcode is required!');
return false;
}
if($('#df7').is(':visible') && typeof(ends) != 'undefined') {
var res = validateDate(starts);
if(res == false) {
apprise('Please select a valid start date!');
return false;
}
}
if(typeof(ends) != 'undefined') {
var res = validateDate(ends);
if(res == false) {
apprise('Please select a valid end date!');
return false;
}
}
if(ends == '') {
apprise('A deal end date is required!');
return false;
}
if($('#df7').is(':visible') && $('#df7').val() == '') {
apprise('If its not a one day sale a start date is required!');
return false
}
$.post('../service/service.postDeal.php', { dealForm: dealForm }, function(data) {
if(data.success == true) {
apprise('Your deal has been posted, thank you!');
window.location = '../root/index.php';
return true;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured and your deal has not been posted. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('The zipcode you supplied was not in our database. Please enter the city ' +
'and state/province in the following prompts to add your location.' , {'confirm':true}, function() {
insertNewLocation(zipcode);
});
}
if(data.fail == 3) {
apprise('A zipcode is required!');
}
}
}, 'json');
return false;
});
function validateDate(string) {
if(string.toLowerCase().indexOf('-') >= 0) {
var dateArray = string.split('-');
var year = dateArray[0], month = dateArray[1], day = dateArray[2];
if(year.length == 4 && month.length == 2 && day.length == 2) return true;
else return false;
}
return false;
}
function swearFilter(string) {
var ret = false;
var filter = [];
var stringArray = string.split(' ');
for(var i = 0; i < stringArray.length; i++) {
if(jQuery.inArray(stringArray[i], filter) > -1) {
ret = stringArray[i];
break;
}
}
return ret;
}
function insertNewLocation(zipcode) {
var city = '';
var state = '';
if (/[^a-zA-Z 0-9]+/g.test(zipcode)) {
apprise('The zipcode should contain only numbers, letters or both!');
return false;
}
apprise('Enter the name of the city:', {'input':true}, function(_city_) {
if(/[^a-zA-Z]+/g.test(_city_)) {
apprise('The city should contain only letters!');
return false;
}
city = _city_;
apprise('Enter the state in 2 letter abbreviated format:', {'input':true}, function(_state_) {
if (/[^a-zA-Z]+/g.test(_state_)) {
apprise('The state should contain only letters');
return false;
}
if(_state_.length > 2) {
apprise('The state should only be 2 letters in length');
}
state = _state_;
$.post('../service/service.insertNewLocation.php', { city: city, state: state, zipcode: zipcode }, function(data) {
if(data.success == true) {
apprise('Thank you, you may now submit you deal!');
return true;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured and your location has not been added to our database. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('A zipcode is required!');
return false;
}
}
}, 'json');
return false;
});
});
}
$('#search-type-button').live('click', function() {
var search = $('#search-type-text').val();
var keyword = $('#keyword-type-text').val();
if(search == '') {
apprise('A zipcode or city and state combo to search for deals in your area!');
return false;
}
if(keyword == 'Keyword') {
apprise('If you want to add a keyword to you deal, make sure its unique!');
return false;
}
$.post('../service/service.loadDealsByCityOrZipcode.php', { search: search, keyword: keyword }, function(data) {
if(data.success) {
$('#content-container').html(data.results);
return true;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured locating the deals. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('There are no deals within the zipcode you provided, be the first to add one!');
return false;
}
if(data.fail == 3) {
apprise('There are no deals matching the tag you supplied!');
return false;
}
if(data.fail == 4) {
apprise('A zipcode or city and state combo to search for deals in your area!');
return false;
}
}
}, 'json');
return false;
});
$('.deals-queried-deal').live('click', function() {
var id = this.id;
$('#comment-link').show();
$.post('../service/service.loadDealDescription.php', { id: id }, function(data) {
if(data.success == true) {
$('#content-container').html(data.results);
var res = getAddressZipcode(id);
if(res != -1) $('#map').show();
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured loading the deal you selected. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
} else if(data.fail == 2) {
apprise('The deal you selected does not exist! ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
} else if(data.fail == 3) {
apprise('An error has occured loading the deal you selected. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
}
}
}, 'json');
return false;
});
$('.vote-down').live('click', function() {
var id = this.id;
var vote = 0;
$.post('../service/service.tallyVote.php', { id: id, vote: vote }, function(data) {
if(data.success == true) {
apprise('Thank you for your vote!');
return true;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured when voting for this deal. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('You have already voted for this deal!');
return false;
}
}
}, 'json');
return false;
});
$('.vote-up').live('click', function() {
var id = this.id;
var vote = 1;
$.post('../service/service.tallyVote.php', { id: id, vote: vote }, function(data) {
if(data.success == true) {
apprise('Thank you for your vote!');
return true;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured when voting for this deal. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('You have already voted for this deal!');
return false;
}
}
}, 'json');
return false;
});
$('#email-button').live('click', function() {
var emailAddress = $('.email-textbox').val();
var from = $('#from-textbox').val();
var message = $('#email-div').html();
var atpos = emailAddress.indexOf("#");
var dotpos = emailAddress.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailAddress.length) {
apprise('Please enter a valid email address!');
return false;
}
if(emailAddress == '') {
apprise('An email address is required!');
return false;
}
if(from == '') {
apprise('Your name is required!');
return false;
}
$.post('../service/service.emailDeal.php', { emailAddress: emailAddress, from: from, message: message}, function(data) {
if(data.success == true) {
apprise('The deal has been sent, we hope they enjoy it!');
return true;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured sending the email. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('An email address is required!');
return false;
}
}
}, 'json');
return false;
});
$('.comment-link').live('click', function() {
var id = this.id;
$.post('../service/service.loadComments.php', { id: id }, function(data) {
if(data.success == true) {
$('#content-container').html(data.results);
return true;
}
if(data.success == false) {
apprise('An error has occured retrieving the comments for this deal. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
}, 'json');
return false;
});
$('.post-comment-button').live('click', function() {
var id = this.id;
var comment = $('#comment-textarea').val();
var author = $('#post-comment-whois').val();
var swear = swearFilter(comment);
if(swear == true) {
apprise('Please remove the word "' + swear + '" from your comment.');
return false;
}
if(comment == '') {
apprise('Please fill out a comment first!');
return false;
}
$.post('../service/service.postComment.php', { id: id, comment: comment, author: author }, function(data) {
if(data.success == true) {
$.post('../service/service.loadComments.php', { id: id }, function(data) {
if(data.success == true) {
$('#content-container').html(data.results);
return true;
}
if(data.success == false) {
apprise('An error has occured retrieving the comments for this deal. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
}, 'json');
return false;
}
if(data.success == false) {
if(data.fail == 1) {
apprise('An error has occured while attempting to post your comment. ' +
'The error has been emailed to our support department to have the issue fixed, we apologize :(');
return false;
}
if(data.fail == 2) {
apprise('Please fill out a comment first!');
return false;
}
}
}, 'json');
return false;
});
});`

Answer 1

Use history.js to pushState and then window.history.back()