Bootstrap Tabs + jQuery AJAX + pdoResources

Некоторое время назад столкнулся с простой задачей: выводить определенный контент с определенных станиц в Bootstrap togglable tabs (вкладки) через jQuery AJAX. Также учитывалась скорость работы. Было много разных решений, но немножко времени и получилось так, как надо было. Естественно, основной компонент — pdoResources, который выводит шапку, то есть имена, пути к контенту и алиасы.

Запускать второй раз pdoResources для вывода самих вкладок — неохота, контент-то простой. Немножко поправил скрипт, и вышел вполне себе рабочий вариант, при этом весьма быстрый, с точки зрения вывода.

Вот участок, который выводит контент:

<div class="tabbable">
	[[- // Кнопки вкладок -]]
	<ul class="nav nav-tabs">
		[[pdoResources?
			&parents=`19`
			&depth=`0`
			&sortby=`menuindex`
			&sortdir=`ASC`
			&select=`id,pagetitle,alias`
			&tpl=`tpl.pdoResources.somesnippet`
		]]
	</ul>

	[[- // Вкладки -]]
	<div class="tab-content">
		[[- // Заполнится скриптом -]]
	</div>
</div>

[[- // Скрипт -]]
<script>
	$(function() {
		var navTabs    = $('.clients-ajax .nav-tabs');
		var tabContent = $('.clients-ajax .tab-content');
		navTabs.tab();
		navTabs.bind("show", function(e) {    
			// Объявляем переменные
			var contentID  = $(e.target).attr("data-target");
			var contentURL = $(e.target).attr("href");
			var tabPane    = '<div class="tab-pane" id="' + contentID.replace('#','') + '"><div class="text-info"><i class="icon-refresh"></i> Загружаем данные</div></div>';

			// Вставляем .tab-pane
			tabContent.append($(tabPane));

			// Подгружаем контент или выводим статичный
			if (typeof(contentURL) != 'undefined')
				$(contentID).load(contentURL.replace('#',' #'), function(){ $(".clients-ajax .nav-tabs").tab(); });
			else
				$(contentID).tab('show');
		});
		$('.clients-ajax .nav-tabs a:first').tab("show");
	});
</script>

А вот сам чанк tpl.pdoResources.somesnippet:

<li><a href="[[~[[+id]]]]#content" data-target="#tab-[[+alias]]" data-toggle="tab">[[+pagetitle]]</a></li>

#content в данном случае — id элемента на запрашиваемой станице, который нужно подтянуть. Пробел перед диезом убран, ибо так красивей вроде, и, если что, редиректит по ссылке на ту страницу, на которой контент, высвечивая нужный контейнер.