State Displacement Error

Question

I built a simple deep link page using a jQuery address and following this example:
http://www.asual.com/jquery/address/samples/state/

Now in this example, the HTML5 browser (I'm using Chrome 10) shows the actual rendered source. That is, http://www.asual.com/jquery/address/samples/state/portfolio shows Portfolio content. in div content , although this content was inserted through the address jQuery / Ajax / $('.content').html() . I rebuilt this example, but on my page, the source is always the source page before any Ajax was executed. This is the same behavior as in a browser without HTML5.
What am I doing wrong?
Thanks for the tips
Thomas

edit:

Here is a demo code:

 <script type="text/javascript"> $.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> 

Mina is almost identical. I removed the link highlighting, changed the URLs according to my site, and changed the Ajax call as I load html. I wonder if there is anything more in it (for example, the necessary .htaccess, which the documentation does not really talk about, but which I found in the GitHub project).

Here is 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'); } }); 

Answer 1

It would be more helpful if you installed a demo for us to watch. But by looking at your code, you need to make sure that you fire the event before everything is loaded.

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

You may also need to trigger a hash change if there is no hash.

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

Looking at the code there, it looks like they are using 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 will update my answer.