AJAX deeplinking with jQuery Address

Posted by antosha on Stack Overflow See other posts from Stack Overflow or by antosha
Published on 2010-04-27T05:46:03Z Indexed on 2010/04/27 10:13 UTC
Read the original article Hit count: 550

Filed under:
|
|
|

Hello,

I have a website which has many pages:

For example:

HOME: http://mywebsite.com/index.html

SOME PAGE: http://mywebsite.com/categorie/somepage.html

I decided to make my pages load dynamically with AJAX without reloading the page. So I decided to use jQuery Address plugin ( http://www.asual.com/jquery/address/docs/ ) in order to allow deeplinking and Back-Forward navigation:

<script type="text/javascript" src="uploads/scripts/jquery.address-1.2rc.min.js"></script>
<script type="text/javascript">
                $('a').address(function() {
                    return $(this).attr('href').replace(/^#/, '');
                });
</script>

Now, after installing the plugin, if I go on http://mywebsite.com/index.html (HOME) and click on SOME PAGE link, jquery successfully loads the http://mywebsite.com/categorie/somepage.html without reloading the page and the address bar on my browser displays: http://mywebsite.com/index.html/#/categorie/somepage.html which is great!

However, the problem is: if I copy this dynamically generated URL: http://mywebsite.com/index.html/#/categorie/somepage.html into a web browser address bar, it will take into my website index.html page and not to the "SOME PAGE" page. Also, The Forward/Back buttons don't work correctly, they only replace the address in the URL bar but the content stays the same.

I suppose that I need to write some JavaScript rule that associates the dynamic URL with the correct page?

Some help would be appreciated. Thanks :)

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX