My solution was very simple, first of all, never use:
Suppose that you have an ajax box with tabs that allows you to refresh the content of the tabs with ajax. What would be the best way of assign onclick events to refresh the content with ajax?
What I did was:
- When the page is loaded the first tab is loaded in the server side, without ajax. In this way search engines can crawl the contents.
- The link on the tabs points to the HREF of the current page with a parameter that permits to change the pre-selected tab in the server side when the page is loaded. Ex: ?sec=onlineusers loads the page with the tab of onlineusers pre-selected and ?sec=lastusersers load the page with lastusers pre-selected.
- The link on the tabs have the event onclick associated with a function and it returns false.
<a href="?tabselection=onlineusers" onClick="changeTab('onlineusers');return false;">Online Users</a>
<a href="?tabselection=lastusers" onClick="changeTab('lastusers');return false;">Last registered users</a>
What are the advantages of this solution?
- Search engines and mobile phones can navigate without problem.
- It is compatible with all browsers.