2 Replies - 439 Views - Last Post: 03 September 2012 - 03:32 PM

#1 giggly kisses  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 80
  • View blog
  • Posts: 391
  • Joined: 29-March 09

Links performing AJAX calls

Posted 29 August 2012 - 11:33 AM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: Links performing AJAX calls

#2 AdaHacker  Icon User is offline

  • Resident Curmudgeon

Reputation: 452
  • View blog
  • Posts: 811
  • Joined: 17-June 08

Re: Links performing AJAX calls

Posted 29 August 2012 - 12:20 PM

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.
Was This Post Helpful? 1
  • +
  • -

#3 giggly kisses  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 80
  • View blog
  • Posts: 391
  • Joined: 29-March 09

Re: Links performing AJAX calls

Posted 03 September 2012 - 03:32 PM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1