I'm making a website that has a drill-down form in it where you can
select an office from a dropdown and then an agent from that
particular office. My problem is once the user views an agent and
clicks the back button on the browser my page breaks. I need to retain
some page states in the form of HTML markup so that when the user
clicks the back button on the browser I can show them the same page
state they were looking at. After the intial page load all the new
content is provided using Ajax post calls. It seems to me that
jHistory would be perfect for doing this but unfortunately in the
$.history.callback function there doesn't seem to be any valid
reinstate object to get the old data from. Can anybody help me figure
out why? Here is my code.
$.history.callback = function(reinstate, cursor) {
alert('history called back');
// reinstate if not back at beginning
if (typeof(reinstate) != 'undefined') {
$('#AgentBrowser').html('called back browser');
}
else {
alert('reinstate undefined');
}
};
and the function where the history object is instantiated...
function attachFormEventHandlers() {
// office_id
$('#office_id').change(function() {
$.post('index.php?action=addon_agentsearch_get_new_office_html',
{office: $(this).val()},
function(new_html) {
var new_browser = $('#AgentBrowserHTML',
new_html).html();
...some unrelated code...
// update agent browser
$('#AgentBrowser').html(new_browser);
// retain browser state
$.history({'agentBrowserHTML':new_browser});
// retain last form action in page so that when the user
// pages through the agents it can re-build the agent
list
$('#Control').val('office_id');
});
});
}
When the page is run and the back button is clicked on the browser
after viewing an agent the $.history.callback function alerts that
reinstate is undefined and the page content does not get changed.
