jQuery Tabs UI и Ajax ссылки выпуск

Question

Ajax и вкладки ссылку головоломки. Я прошел через все документы и SO и не могу заставить это работать.

Каковы рабочие ссылки Неагэкс Tab One. Не работает прямая ссылка на вкладки с другой страницы или URL-адреса.

I.e., если я перехожу к http://mydomain.com/ajaxloadedpage1/ Я получаю простой текст содержимого и не отображается на вкладке. Если я перейду к http://mydomain.com/#ajaxloadedpage1, я получу первую вкладку Non-ajax Tab One.

Как получить страницу ajax для загрузки на вкладке? Является ли это сложностью, что я загружаю содержимое ajax через php и что исходный файл не имеет .html-суффикса файла?

Редактировать 2/11/11 Все еще не работает, но я добавлю исправление, когда выясню это.

код заголовка код

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) 

Страница:

<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

У вас действительно есть # в ваших id атрибутов? Ваш пример HTML сказать:

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

, но я думаю, что вы хотите сказать:

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

Есть и другие случаи, как это слишком.

Внутри вкладок jQuery-UI есть некоторые специальные фрагменты URL-адресов для работы с различными ошибками браузера и странностями; это искажение может скрывать проблему, когда вы просто щелкаете, но не когда вы попадаете туда через URL-адрес.

Answer 2

Я не уверен, если это то, что вы хотите, но я использую вариант печенья для вкладок JQuery UI, как это:

<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> 

Хранит вкладку Я использовал последний раз, когда я посетил страницу. Просто убедитесь, что ваши разные наборы таблеток имеют разные идентификаторы.

Answer 3

Вы посмотрели функцию jQuery.load? http://api.jquery.com/load/

пример: загрузите #ajaxloadedpage DIV из ajaxloadedpage2.php в # ajaxloadedpage2:

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