JQuery вкладки с сортируемыми в отдельных файлах - PullRequest
Новая
       22

JQuery вкладки с сортируемыми в отдельных файлах

0 голосов
/ 31 марта 2011

По данным этой страницы:

http://jqueryui.com/demos/tabs/#ajax

У меня может быть содержимое вкладок в отдельных файлах. Это означает, что мне просто нужно иметь следующий HTML: 

<div id="tabs">
    <ul>
        <li class="tab" id="tab_1"><a href="sortable-0.html">Home</a></li>
    </ul>
</tab>

где sortable-0.html просто содержит: 

<div class="column" id="column_1">

    <div class="portlet" id="portlet_1">
        <div class="portlet-header">Home 1</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

</div>

<div class="column" id="column_2">

</div>

<div class="column" id="column_3">

</div>

Но когда я это делаю, сортировка прекращается. Если я скопирую отсортированный HTML-код обратно в исходный файл, он снова начинает работать.

Вот текущий скрипт, в котором весь код находится в 1 файле, поэтому ссылка ниже будет работать. Тем не менее, я не могу заставить его работать, если переместить сортируемый HTML-код в другой файл, а затем вставлю URL-адрес нового файла в следующий раздел HTML-кода вкладок jquery: 

<li class="tab" id="tab_1"><a href="sortable-0.html">Home</a></li>

Ссылка с точным рабочим примером такова:

http://jsfiddle.net/oshirowanen/ZjXz6/

1 Ответ

2 голосов
/ 31 марта 2011

вы должны понимать, как работает JS ... если вы вызовете функцию .sortable (), она найдет на вашей странице все элементы с классом "portlet" и сделает их сортируемыми.

НО: с AjaxВы делаете это: загружаете страницу, вызывается ваша сортируемая функция, она будет искать все элементы класса "портлет" и делать их сортируемыми, ТОГДА вы загружаете свой контент через ajax ... ваш предыдущий вызов sorttable недействителен для вашего нового контента,Это означает, что если вы загружаете данные через ajax, вам нужно снова вызвать .sortable () ПОСЛЕ того, как контент был успешно загружен:)

Посмотрите, можете ли вы добавить что-то вроде этого: 

$("#tabs").tabs({
    ajaxOptions: {
        success: function(){
            $(".column").sortable({
                connectWith: '.column'
            });
        }
    }
});
...