Проблема с bootstrap tab + ajax

Здравствуйте.

Использую bootstrap tabs вместе с аяксом. И они почему то работают в одну сторону. Вот код

$('a[data-tab]').on('click', function (e) {
    e.preventDefault();
    var area = $('.tab-content');
    var tabActive = $(this);
    area.empty();
    setAjaxLoader();
    setTimeout(function(){
        if(tabActive.attr('href') == "#full")
        {
            $.ajax({
                url: 'some_data_full',
                type: 'get',
                dataType: 'html',
                success: function(template)
                {
                    deleteAjaxLoader();
                    area.append(template);
                    tabActive.tab('show')
                }
            })
        }
        else
        {
            $.ajax({
                url: 'some_data_short'
                type: 'get',
                dataType: 'html',
                success: function(template)
                {
                    deleteAjaxLoader();
                    area.append(template);
                    tabActive.tab('show')
                }
            })
        }
    }, 800);
});
function setAjaxLoader()
{
    var Template = $("<div class='block-loading'></div>");
    var Loader = $('[data-block-loading]');
    Loader.html(Template);
}
function deleteAjaxLoader()
{
    var Loader = $('.block-loading');
    Loader.remove();
}

При нажатии на таб, получаю шаблон с контентом. Вот 2 шаблона

<div role="tabpanel" class="tab-pane fade in active" id="short">...</div> // Активный потому что при открытии страницы, этот таб инклюдится 
<div role="tabpanel" class="tab-pane fade" id="full">...</div>

Габлон который с id=full при нажатии на таб, нормально подгружается и отображается, но если обратно нажать на таб с id=short, то шаблон не отображается. В чем может быть проблема?