JQuery tabs UI and Ajax links problem

Question

Ajax and tabs link puzzle. I went through all the docs and SOs and can't get this to work.

What works are Non-ajax Tab One links. Direct link to tabs from another page or URL does not work.

Ie if I go to http://mydomain.com/ajaxloadedpage1/ I get plain text content and do not appear on the tab. If I go to http://mydomain.com/#ajaxloadedpage1 , I get the first Non-ajax Tab One tab.

How do I get the ajax page to load in a tab? Is it complicated that I load ajax contents via php and that the source file does not have a .html file suffix?

Edit 2/11/11 Still does not work, but I will add a fix when I find out.

Header code

ajax loader: $(function() { $("#tabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("I tried to load this, but couldn't. Try another link?"); } } }); }); link enabler: $(document).ready(function(){ var $tabs= $("#tabs").tabs(); $('.ajaxloadedpage1').click(function() { $tabs.tabs('select', 1); return false; }); }); (other links removed for clarity) 

Page Code:

 <div id="tabs"> <ul><a href="#tabs-1">Non-ajax Tab One</a></li> <li><a id="#ajaxloadedpage1" href="http://mydomain.com/ajaxloadedpage1/"><span>Ajax Loaded Page1</span></a></li> <li><a id="#ajaxloadedpage2" href="http://mydomain.com/ajaxloadedpage2/"><span>Ajax Loaded Page2</span></a></li> <li><a id="#ajaxloadedpage3" href="http://mydomain.com/ajaxloadedpage3/"><span>Ajax Loaded Page3</span></a></li> <ul> <div id="tabs-1">Non-ajax Tab One</div> //This tab has link to other tabs in this fashion, and they work <a href="#ajaxloadedpage1" class="ajaxloadedpage1" title="Ajax Loaded Page1">Ajax Loaded Page1</a> <a href="#ajaxloadedpage2" class="ajaxloadedpage2" title="Ajax Loaded Page2">Ajax Loaded Page2</a> <a href="#ajaxloadedpage3" class="ajaxloadedpage3" title="Ajax Loaded Page3">Ajax Loaded Page3</a> </div></div> <div id="ajaxloadedpage1"></div> <div id="ajaxloadedpage2"></div> <div id="ajaxloadedpage3"></div></div> 

Answer 1

Do you really have # in your id attributes? Your HTML sample says this:

 <li><a id="#ajaxloadedpage1" ... <li><a id="#ajaxloadedpage2" ... <li><a id="#ajaxloadedpage3" ... 

but I think you want to say this:

 <li><a id="ajaxloadedpage1" ... <li><a id="ajaxloadedpage2" ... <li><a id="ajaxloadedpage3" ... 

There are other similar cases.

The jQuery-UI tabs have a special fragment of URLs to circumvent various browser errors and oddities; that manipulation can hide the problem when you just click, but not when you get there through the url.

Answer 2

I'm not sure if this is what you want, but I use the jQuery tabs cookie option as follows:

 <script type="text/javascript"> $(document).ready(function(){ $("#tabs_start").tabs({ cookie: { // store cookie for a day, without, it would be a session cookie expires: 1 } }); </script> 

This is where the tab that I used the last time I visited the page is stored. Just make sure your different sets of pills have different identifiers.

Answer 3

Have you seen the jQuery.load function? http://api.jquery.com/load/

Example

: upload the div #ajaxloadedpage ajaxloadedpage2.php to # ajaxloadedpage2:

 $('#ajaxloadedpage2').load('ajaxloadedpage2.php #ajaxloadedpage');