Fragment identifier?

[Vernier]

Hiya,

I currently have it so that my site loads content into a specific div.

like so:

<a href="javascript:ajaxpage('/staff/_frontend/listen_record.php', 'content');">Recent Songs</a>

However I want it so that when they click that, it also changes the url to access that page?

Thanks guys

~ David

[devnull69]

This is a typical application for the "history hack". You can append a hash "#" value to the end of the current location URL. This will not force the browser to reload the page (as it does after any other change to the location URL), it is bookmarkable and it will be stored in the browser history.

// on page load check the hash in the URL and execute the respective AJAX function
if(window.location.hash) {
   ajaxpage('/staff/_frontend/listen_record.php', window.location.hash.substring(1)); // substring will cut off the leading #
}

// later on in the page, after changing the content and using the ajaxpage() function, you'll have to change the hash
var newcontent = 'about';  // example
window.location.hash = newcontent;

Some of the newest browser versions support the History API ... but not all of them yet.

[Vernier]

Hey, I want it so that when the page is loaded through the javascript:ajaxpage, the url changes from http://example.com/example to something like http://example.com/example/recent and when it's visited as a url, it displays the content as if the javascript:ajaxpage was clicked

Thanks

~ David

[devnull69]

I forgot about the most important part of the history hack ... shame on me ...

One problem of my suggested solution is that after using the browser navigation (back/forward) the onload event usually will not fire, neither will the JS code in the global scope be loaded.

Solution: Start an interval with setInterval() for let's say 500 msec, that checks the URL for a hash change and then loads the new content according to the new hash

[Vernier]

Originally Posted by devnull69

I forgot about the most important part of the history hack ... shame on me ...

One problem of my suggested solution is that after using the browser navigation (back/forward) the onload event usually will not fire, neither will the JS code in the global scope be loaded.

Solution: Start an interval with setInterval() for let's say 500 msec, that checks the URL for a hash change and then loads the new content according to the new hash

So I have in my head tags:

// on page load check the hash in the URL and execute the respective AJAX function
if(window.location.hash) {
   ajaxpage('/staff/_frontend/listen_record.php', window.location.hash.substring(1)); // substring will cut off the leading #
}

Where do I put:

// later on in the page, after changing the content and using the ajaxpage() function, you'll have to change the hash
var newcontent = 'about';  // example
window.location.hash = newcontent;

Cheers

~ David

[devnull69]

Please take a look at my code snippet here: http://snipplr.com/view/63374/

Of course you will have to amend the getContent() function to reflect the correct content according to the description.

And as I said in my latest PM ... you'll have to think about a way to connect a short description (needed for the URL hash) with the actual URL you need. Maybe you could even use the complete URL as hash. Something like "http://your.url.com/centralpage.php#/staff/_frontend/listen_record.php" for Recent Songs etc.

[Vernier]

Originally Posted by devnull69

Please take a look at my code snippet here: http://snipplr.com/view/63374/

Of course you will have to amend the getContent() function to reflect the correct content according to the description.

And as I said in my latest PM ... you'll have to think about a way to connect a short description (needed for the URL hash) with the actual URL you need. Maybe you could even use the complete URL as hash. Something like "http://your.url.com/centralpage.php#/staff/_frontend/listen_record.php" for Recent Songs etc.

Hey thanks,

how would I do this for about 10 of these (all different)

<a href="javascript:ajaxpage('/staff/_frontend/listen_record.php', 'content');">Recent Songs</a>

Cheers

~ David