AJAX Tabs with remote URLs

[xNeOx]

Hello,

I have problem with AJAX remote urls.

I already built my tab functionality and I got everything working. All I need know is the remote URLs functionality. So the thing is that I am currently building profile settings page for my website and I have different categories under the settings page like privacy and notifications etc..

So whenever I click on the notifications tabs (for example) I the main content will be overwritten with the notification settings. At the moment, whenever I click on a certain tab, it instantly changes and my url remains untouched. I want my URL to change whenever I change the information through clicking a tab. So let's say I click on a tab and my URL is www.website.com/settings.php?notifications.

I need this functionality because whenever I'll add a link somewhere on my website I and I want the user to be redirected to a certain section of the settings like notifications rather than going on settings and then clicking on notifications.

If I didn't explain something correctly or you don't understand a certain section I wrote then please let me know because I really need this feature and it is a vital part of my website because I will not only be using it on settings - I am thinking of adding this feature to many different parts of my website.

Lastly, I know that I wrote too much, I do believe that this functionality will have to be done through GET variables using PHP and AJAX to fire the code and PHP to echo it out on to the page. I think I know the basic logic of it but I don't know where to start and how to set it out.

Can anyone help me out?

[cahva]

Only way of changing the url without reloading the page is by using hashtags (eg. settings.php#notifications). With js its quite easy to determine what content you want to load using hashtag. Hashtag can be found in the variable "location.hash". And you can set the hashtag via javascript too. eg.

location.hash = 'something';

That would add #something(or replace current hashtag) to your current url.

If you want to go full steam ahead with hashtagging, theres a nice js framework with this functionality(and much more): http://sammyjs.org/

[xNeOx]

Thanks for the reply. Have you looked at how facebook does theirs? facebook has for e.g. profile.php?id=12345678?sk=photos the url changes but the page elements dont refresh e.g. the chat or the bar at the top... Interesting 🙂

[cahva]

Well FB is a whole new ballgame 🙂 They used to have hashtags also but now dont as they've changed technology. I took a little peak and with HTML 5 you can actually change the url nowdays(this was prophibited earlier) with pushState. Search google for that 🙂 But anyway, using hashtag is just as good in your situation and is easy to implement.