views:

45

answers:

1

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;
}
A: 

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.

Zurahn