jquery tabs, reload page for each tab

Question

Using jQuery ui tabs, is there an effective way to reload the page for each tab?

I tried doing

$('#tab_two').click(function() {
    window.location = 'http://localhost/page#tab_two';
    });

But, that still lands on the current page. However, if you refresh the page after that then it will redirect to #tab_two.

The only way to effectively redirect the page seems to be using PHP. But having

$('#tab_two').click(function() {
    header('location: http://localhost/page#tab_two');
    });

messes up the page.

Any ideas on how to achieve this? Thanks.

Answer 1

I think that you can use load method like I did below:

$(function() {
   $( "#tabs" ).tabs();

   $( "#tab_two" ).click(function() {
      $( "#tabs" ).tabs( "load" , 1 );   // zero-based (tab#1 = 0 index)
   });
});

Documentation:

.tabs( "load" , index ) Reload the content of an Ajax tab programmatically. This method always loads the tab content from the remote location, even if cache is set to true. The second argument is the zero-based index of the tab to be reloaded.