Ajax and pushstate or popstate history?

Hello everyone,

I’m building a website, and in this website, the projects are called by Ajax.
However, I want the URL to change with the real URL of the project. Is it possible ?
I’m quite new to this… I heard about Popstate and pushstate ??…
Do you have any idea of how I could do this ? :slight_smile:

Thanks ! :smiley:

Here the part of my code :

function ajaxproject()
{
$(‘#loadnotice’).hide();

$('.article_project').click(function()
{
	$('#loadnotice').show();

	var url = $(this).find('a').data('url')

    $.ajax({url: url, success: function(data) 
		{
			$('#project-presentation').html(data);
		}
    });

I wonder why you are getting a url attribute from a link which should have it stored in its href ?

But, yes, you’d need to let your browser history know what’s been done via pushState :

$('.article_project').click(function() {
    $('#loadnotice').show();

    var url = $(this).find('a').data('url');

    $.ajax({
        url: url, 
        success: function(data) {
            var newTitle = "Some optional new title"; // Could as well be null
            history.pushState({page: url}, newTitle, url);

            $('#project-presentation').html(data);
	}
    });
});

Have a look at the Mozilla doc for more details about those arguments.

Hey Thanks !
However I wonder, shouldn’t it be by popstate ? So that we can go forward and previous on the state of the Ajax ??? :slight_smile:

EDIT : I meant on browser previous button, the Ajax cancel?

Because for now, I’m cheating with

history.back()

On my close Ajax div function… I don’t know if it’s really clean.

Oh, never mind I find something :

Thanks :slight_smile: