I've been using the jQuery address plugin to enable back-button support, which has been working except for when the link is in the AJAX content area. For example
<div id="content">
<a href="example.html" rel="address:example.html" onclick="ajaxLoad(this);">link</a>
</div>
where ajaxLoad replaces content
with the content of example.html
. When I try to do this, the address bar does not change, and the back button just goes to the last instance of a link outside the content area.
Is there a way to make this work?
EDIT:
Plugin: http://www.asual.com/jquery/address/
Example ajaxLoad function:
function ajaxLoad(obj)
{
$.get(obj, function(data)
{
$("#main").html(data);
});
return false;
}
I solved this using context-sensitive window.location.
Modified ajaxLoad:
function ajaxLoad(obj, inline)
{
if(!inline)
window.location='#/'+obj.rel.substring(8);
else
{
$.get(obj, function(data)
{
$("#main").html(data);
});
}
return false;
}
And then the handler for the initial page load, and when the back/forward buttons are used:
$.address.externalChange(function(event)
{
var url = event.value.substring(1); //strips the leading slash
if(url == "")
url = 'index.php';
loadPage(url, true);
});
I don't know if this is the best method, but it works.