Address State confusion

I built a simple deep linking page using Jquery address and following this example:

http://www.asual.com/jquery/address/samples/state/

Now in this example, a HTML5 Browser (I use Chrome 10) shows the actual displayed source. I.e. http://www.asual.com/jquery/address/samples/state/portfolio shows Portfolio content. in the content div, even though that content was inserted via Jquery address/Ajax/$('.content').html(). I rebuilt this example, but on my page the source is always the one of the initial page, before any Ajax was executed. This is the same behaviour as in a non HTML5 browser.

What am I doing wrong?

Thanks for hints,

thomas

edit:

Here's the demo code:

<script type="text/javascrip开发者_如何学编程t"> 

        $.address.init(function() {

            // Initializes the plugin
            $('.nav a').address();

        }).change(function(event) {

            // Selects the proper navigation link
            $('.nav a').each(function() {
                if ($(this).attr('href') == ($.address.state() + event.path)) {
                    $(this).addClass('selected').focus();
                } else {
                    $(this).removeClass('selected');
                }
            });

            // Handles response
            var handler = function(data) {
                $('.content').html($('.content', data).html()).show();
                $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
            };

            // Loads the page content and inserts it into the content area
            $.ajax({
                url: $.address.state() + event.path,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    handler(XMLHttpRequest.responseText);
                },
                success: function(data, textStatus, XMLHttpRequest) {
                    handler(data);
                }
            });
        });

        // Hides the tabs during initialization
        document.write('<style type="text/css"> .content { display: none; } </style>');

    </script>   

Mine's pretty much identical. I removed the link highlighting, changed the URLs to match my site and changed the Ajax call since I'm loading html. I wonder if there's "something more" to it (like the neccessary .htaccess which the documentation doesn't really speak about but which I found in the project's GitHub).

Here's my code:

$.address.init(function(event) {
        $('#blogMenu a').address();
        $('#blogBottomMenu a').address();
        $('.linkleiste a').address();
}).change(function(event) {
        var value = $.address.state().replace(/^\/$/, '') + event.value;
  value = value.replace(/^\/blog\//,'');
  value = value.replace(/_/,'');
        var teile = value.split('/');
        var name = '';
        var thema = '';
        if(teile[0]) name = teile[0];
        if(teile[1]) thema = teile[1];
        $('#blog').hide();
            if(!value.match(/ADFRAME/)) {
                $(document).scrollTo('#aufmacher','fast');
                $('#blogMenu').load('/snp/blog_menu.snp',{A_NAME:name,ETIKETT:thema,id:id});
                $('#blog').load('/blog/article.snp',{A_NAME:name,ETIKETT:thema,id:id},function() {
                    $('#blog').show();
                });
            }
            else {
                $('#blog').fadeIn('fast');
            }

    });

It would be more helpful if you would have setup a demo for us to look at. But by looking at your code you need to make sure you trigger the event before everything is loaded.

$(function () { // NOT $(document).ready(function () {});
    $.address.init();
});

Also you might have to trigger a hash change when there is no hash.

$(function () {
    $.address.init();
    $.address.change(); // Triggers hash change when there is no hash!
});

By looking at there code it looks like they use a different layout from yours.

var init = true,
state = window.history.pushState !== undefined;

// Handles response
var handler = function (data) {
    $('title').html($('title', data).html());
    $('.content').html($('.content', data).html());
    $('.page').show();
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

$.address.state('/jquery/address/samples/state').init(function () {

    // Initializes the plugin
    $('.nav a').address();

}).change(function (event) {

    // Selects the proper navigation link
    $('.nav a').each(function () {
        if ($(this).attr('href') == ($.address.state() + event.path)) {
            $(this).addClass('selected').focus();
        } else {
            $(this).removeClass('selected');
        }
    });

    if (state && init) {

        init = false;

    } else {

        // Loads the page content and inserts it into the content area
        $.ajax({
            url:$.address.state() + event.path,
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                handler(XMLHttpRequest.responseText);
            },
            success:function (data, textStatus, XMLHttpRequest) {
                handler(data);
            }
        });
    }

});

if (!state) {

    // Hides the page during initialization
    document.write('<style type="text/css"> .page { display: none; } </style>');
}

If you set up a demo I'll update my Answer.