Question

I’m trying to learn more about ‘ajax’ and so far have had the most success with jquery tabs with ajax options. The problems I am having are:

• The tabs degrade into li’s. Can I simply change the template in jquery-ui.js?
• I can’t get the title of the page to change.
• On a page reload, I am taken back to my homepage.
• Bookmarking may not work.
• The computed styles that come with the tabs interfere with other page
  elements and seem to make the whole page less modular.

I am also learning some php and feel some of these problems may fall under that category.

All I really want is a page where i can easily control what is and isn’t reloaded when an anchor is clicked and that maintains the scripts from the homepage.

Would it be smarter to start from scratch or to modify the existing ajax part of the tabs? I feel like what I’m trying to do is somewhat basic, but small obstacles are piling up and the soul searching is starting to begin.

Answer 1

The only way to change a url is to do a redirect, or add a hash (#qwerty) after the current url. If you really meant title change, you should handle this with the select event

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

Where you can do the appropriate actions inside that function.

For templates, you can use your own:

 Panel:
   $( ".selector" ).tabs({ panelTemplate: '<li></li>' })

Tab:
 $( ".selector" ).tabs({ tabTemplate: '<div><a href="#{href}"><span>#{label}</span></a></div>' });

You can find more info and examples on the official doc: Here