[giggly kisses]

I'm trying to setup my main navigation so that when you click on a link (for example, home) it makes an ajax call to a file on my server (in this example, home.php), which then echos a JSON object back and loads the content below with the response (but doesn't reload the navigation). I have all of this setup and it works fine. The problem I'm having with it is the URL doesn't change. I want people to be able to link to different pages on my site, so having a different URL for each page is important. Here is the code I have for the links:

$('[id^="nav-link-"]').click(function(event) {
		$('#top-nav .selected-link').removeClass('selected-link');
		$(this).addClass('selected-link');
		
		var linkQuery = {
			url:			"loadPage.php",
			type:			"GET",
			dataType:		"html",
			data:		{
				"page":		$(this).attr('id')
			},
			beforeSend:	function(jqXHR, settings) {
				$('#center-content').hide();
			},
			success:		function(data, textStatus, jqXHR) {
				$('#center-content').html(data).fadeIn(850);
			},
			error:		function(jqXHR, textStatus, errorThrown) {
				alert('error');
			}
		};
		$.ajax(linkQuery);
		return false;
	});

Is there anyway to make an AJAX call and update the url? Do I have to use something like an iframe to do this?

[AdaHacker]

You can use pushState() from the history API to update the URL. The down side (if you consider it one), is that it doesn't work in IE.

The non-HTML5 method, which works in IE but is ugly as sin, is to modify the hash portion of the URL. Of course, the down side of that is that you have to use Javascript to decode the URL and load the page because the hash is never sent to the server. PushState is nicer in this regard, as you can easily map the JS URL change to the canonical server-side URL.

[giggly kisses]

Thank you, this is exactly what I needed. Glad there is a solution to this that doesn't require me to use an iframe, since that would result in a complete restructure of my code base.