tabs replacement without roundtrip

tabs replacement without roundtrip


I want to create a menu which has a normal menu and tabs.
When I click on the menu items the content of tabs is replaced via
ajax. It is replaced correctly but then there are no more tabs.
Is this possible or do I have do make this on the server?
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="__css/ui-lightness/jquery-
ui-1.7.2.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="__js/jquery-1.3.2.min.js"></
script>
        <script type="text/javascript" src="__js/jquery-
ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){
                // Tabs
                $('#tabs').tabs();
            });
        </script>
<script>
function injectTabs(){
$('#tabs').tabs('destroy');
$.get("__tab1.html", function(data){
$('#tabs').replaceWith( data );
});
$('#tabs').tabs();
}
</script>
        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration:
none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position:
absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0;
cursor: pointer; float: left; list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>
    </head>
    <body>
        <!-- Tabs -->
        <a href="#" onClick="injectTabs();">j<a>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
                <li><a href="#tabs-3">Third</a></li>
            </ul>
            <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna,
blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque
sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
            <div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>
        </div>
    </body>
</html>
__tab1.html:
<ul>
                <li><a href="#tabs-1">eins</a></li>
                <li><a href="#tabs-2">zwei</a></li>
                <li><a href="#tabs-3">drei</a></li>
            </ul>
            <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna,
blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque
sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
            <div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>