Why browser's address bar is unchanged when using AJAX ?

Question

I am using AJAX/JSON combination in Zend Framework. Whenever I click any link in my application, AJAX request is called and content is loaded successfully in DIVs But the address bar is unchanged. How to change address bar according to current active action.

Here is My Working Code:

When I use http://practice.dev/ my index.phtml file is loaded.

<a href='http://practice.dev/index/one' class='ajax'>One</a>
<a href='http://practice.dev/index/two' class='ajax'>Two</a>

<div id="content">content comes here</div>

one.phtml:

$jsonArray = array( 'content' => 'One' );
echo Zend_Json::encode( $jsonArray );

two.phtml:

$jsonArray = array( 'content' => 'Two' );
echo Zend_Json::encode( $jsonArray );

JS Code

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event) {
        event.preventDefault();
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

When I click link one then string 'One' is loaded in content DIV but address bar is still http://practice.dev/. It should be http://practice.dev/index/one

When I click link two then string 'Two' is loaded in content DIV but address bar is still http://practice.dev/. It should be http://practice.dev/index/two

How is it possible ?

Thanks

Answer 1

This:

event.preventDefault();

is what is preventing the address bar from updating.

I don't believe there is a way to change the URL (document.location.href) itself without causing a browser redirect. Even changing the fragment (document.location.hash) will cause a "scroll" (depending on whether or not the browser window is small enough to scroll).

EDIT: Well, it'll cause a scroll to the respective anchor only if such an anchor exists in your page, as Pekka notes. So I guess you could try that.

If you want your page to be indexable by Google despite the Ajax and the Ajax-modified URLs, start your fragments with ! to allow Google to crawl your Ajax pages.

Answer 2

Remove event.preventDefault();, this is stopping the default behavior for the link occurring. The default behavior being - going to the URL in the href attribute.

Edit based on more info from OP

You need to make your javascript respond to the hash tag.

Instead of having a URL schema just like this http://practice.dev/index/one it needs to have a hash tag version too, that javascript can handle like this http://practice.dev/index#one. This means that if someone visits the page http://practice.dev/index#two your javascript can know that it needs to go and get the second page, even though Zend will have got the first page already.

In your javascript you can get the hash tag using

var hash = location.hash;

And set it using

location.hash = "two";

There is more about this here

So leave your links the same like this http://practice.dev/index/one but append a hash tag to the URL when the user clicks a link, you CAN add hash tags the address bar. Change your javascript to load a certain page number if there is a hash tag present when the page loads.