пользовательского интерфейса jQuery вкладки и проблема AJAX-ссылок

Головоломка ajax и tabs link. Я просмотрел все документы и так и не могу заставить это работать.

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

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

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

Edit 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>
3 4
jquery jquery-ui-tabs

3 ответа:

Действительно ли у вас есть # в ваших 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.

4

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

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

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

Я не уверен, что это то, что вы хотите, но я использую опцию cookie для вкладок пользовательского интерфейса jQuery следующим образом: 

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

Здесь хранится вкладка, которую я использовал при последнем посещении страницы. Просто убедитесь, что у разных наборов вкладок разные идентификаторы.

1