Search code examples
jqueryajaxjquery-address

jQuery address plugin -- Not working when content is replaced


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

Solution

  • 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.