jQuery UI makes my tabs reload every time I click them

开发者 https://www.devze.com 2022-12-12 07:23 出处：网络

I\'m creating a web application which loads tabs using AJAX. My problem is that if I have multiple tabs, jQuery reloads a tab every time I click it again (after visiting another tab).

I'm creating a web application which loads tabs using AJAX. My problem is that if I have multiple tabs, jQuery reloads a tab every time I click it again (after visiting another tab).

Here is my code:

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />

<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>

main.js:

$(document).ready(function()
{
    //Create tabs
    $("#mainTabs").tabs({load: function()
    {
        //Make accordion from template selector
        $(".selectTemplate").accordion();
    }}).find(".ui-tabs-nav").sortable({axis:'x'});
    //Create new document tab
    newDoc();
});

function newDoc()
{
    //Create new tab
    $("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}

newdocument.html:

<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
    <h3><a href="#">Document</a></h3>
    <div>
        <ul class="selectTemplateTable">
            &l开发者_高级运维t;li>Blank</li>
            <li>Letter</li>
            <li>Envelope</li>
            <li>Business card</li>
        </ul>
    </div>
    <h3><a href="#">Spreadsheets</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Check list</li>
            <li>Budget</li>
        </ul>
    </div>
    <h3><a href="#">Presentations</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>White</li>
            <li>Black</li>
            <li>Nature</li>
            <li>Space</li>
        </ul>
    </div>
    <h3><a href="#">Form</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Survey</li>
            <li>Exam</li>
        </ul>
    </div>
</div>
</div>

How can I fix this?

Thanks,

I found out that I must use cache. I'll answer my own q to help others.

Add cache: true to the tabs() flags:

//Create tabs
 $("#mainTabs").tabs({load: function()
 {
  //Make accordion from template selector
  $(".selectTemplate").accordion();
 }, cache: true})