tabs UI - Loading additional php content in open tab will destroy css

tabs UI - Loading additional php content in open tab will destroy css

Hi

I want to run a booking program inside of tab 3. When I try to open an add all the content goes underneath the tabs area. is there any script snippet to hold all the content inside of the open tab on loading additional content via php, like in my case?

Here is my example:

http://www.zakynthos.net.gr/Vacations/jquerytab.php

I tried out following without success:

$(document).ready(function () {
    var currentTabIndex = "3";

    $tab = $("#tabs").tabs({
         activate : function (e, ui) {
            currentTabIndex = ui.newTab.index().toString();
            sessionStorage.setItem('tab-index', currentTabIndex);
         }
    });

    if (sessionStorage.getItem('tab-index') != null) {
        currentTabIndex = sessionStorage.getItem('tab-index');
        console.log(currentTabIndex);
        $tab.tabs('option', 'active', currentTabIndex);
    }
    $('#btn-sub').on('click', function () {
        sessionStorage.setItem("tab-index", currentTabIndex);
        //window.location = "/Home/Index/";
    });
});

php is included in that way:

<?php
ob_start();
?>

    {VRL_LISTINGS}
   
<?php include '/var/www/vhosts/zakynthos.net.gr/httpdocs/Vacations/app/views/pjLayouts/pjActionListings.php'; ?>

With static content all works fine.

Has somebody any idea?