Проблемы с пользовательским интерфейсом JQuery Tabs и Ajax - PullRequest
Новая
       6

Проблемы с пользовательским интерфейсом JQuery Tabs и Ajax

4 голосов
/ 28 января 2011

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

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

Т.е., если я перехожу на 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>

Ответы [ 3 ]

4 голосов
/ 05 февраля 2011

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

1 голос
/ 09 февраля 2011

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

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

$('#ajaxloadedpage2').load('ajaxloadedpage2.php #ajaxloadedpage');
1 голос
/ 09 февраля 2011

Я не уверен, что это то, что вам нужно, но я использую опцию 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>

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

...