Je crée une application web qui charge les onglets en utilisant AJAX. Mon problème est que si j'ai plusieurs onglets, jQuery recharge un onglet chaque fois que je le clique à nouveau (après avoir visité un autre onglet).jQuery UI rend mes onglets recharger chaque fois que je clique sur eux

Voici mon 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"> 
      <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>

Comment puis-je corriger ce?

Merci,

Source

2009-11-21 Anonymous

Je trouve que je dois utiliser le cache. Je vais répondre à mon propre q pour aider les autres.

cache Ajouter: true aux onglets(): drapeaux

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

Source

2009-11-21 19:31:50

Je sais que c'est un ancien poste, mais Google m'a amené ici. "cache" a été déprécié en 1.9 - maintenant vous devez le faire vous-même dans l'événement "beforeLoad" - voir: http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options- added-beforeload-event – philw

jQuery UI rend mes onglets recharger chaque fois que je clique sur eux

index.html:

main.js:

newdocument.html:

Répondre

Questions connexes