2015-03-29 1 views
1

J'ai une application qui utilisait l'ancienne version du widget onglets JQuery pour ajouter et supprimer dynamiquement des onglets, c'est-à-dire tabs.add() et tabs.remove(). J'ai passé deux jours à essayer d'obtenir la 'nouvelle' manière en utilisant tabs.refresh() comme indiqué sur le guide de mise à jour de JQuery pour fonctionner et rien ne fonctionne mais il n'y a pas d'erreurs javascript sur la console Chromium.Exemple tabs.refresh() dans JQuery 1.10 ne fonctionne pas pour moi

Cette page Web contient ce que je suppose est l'exemple de code officiel JQuery: http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

C'est mycode qui ne fait rien. Il est une coupe et coller à partir du guide de mise à niveau:

<div id="tabs" class="ui-tabs-nav" ></div> 
<script> 
    function addTab(fileName, url){ 
     $("<li><a href='#" + url +"'>" + fileName + "</a></li>").appendTo("#tabs .ui-tabs-nav"); 
     $("#tabs").tabs().tabs("refresh"); 
} 

Cette fonction est appelée comme d'habitude, mais il n'y a pas de changement à l'interface utilisateur. Des idées?

c'est l'application entière. Il montre un sélecteur de fichiers puis boucle sur la liste résultante des noms de fichiers en créant un onglet pour chacun. À l'arrière, un serveur fournit le contenu de chaque onglet via l'URL transmise à l'onglet. jQuery UI Tabs - refresh() remplace ajouter, supprimer

</script> 
</head> 
<body> 
<table id="master buttons"> 
<tr> 
    <td> 
     <input type="file" id="selectedFiles" style="display: none;" multiple onchange="buildFileTabs.call(this, event)" /> 
     <img src="select_files_button_image.png" alt="Image Not Found" onclick="showFilePicker();" /> 
    </td> 

</tr> 
</table> 

    <script> 

     function addTab(fileName, url){ 
      alert("AddTab"); 
      $("<li><a href='" + url+"'>" + fileName + "</a></li>").appendTo("#tabs .ui-tabs-nav"); 
      $("#tabs").tabs().tabs("refresh"); 
     } 

     function showFilePicker() { 
      document.getElementById("selectedFiles").click(); 
     }  

     function buildFileTabs(page, event) { 
      var theElement = document.getElementById('selectedFiles'); 

      for (var i = 0, numFiles = theElement.files.length; i < numFiles; i++) { 
       var url="http://localhost:8080/FDS/FastDictionarySearchServlet?filename=" + theElement.files[i].name; 
        addTab ( theElement.files[i].name, url) ; 
      } 
     } 

    </script>  
</body> 
</html> 
+0

pouvez-vous coller tous vos codes –

+0

Prashant, j'ai ajouté l'application complète à mon poste. Avoir à cela! – user903724

Répondre

0

j'ai finalement compris comment faire. Comme d'habitude avec moi et JQuery, c'est très simple quand vous avez enfin compris, mais il faut beaucoup d'essais et d'erreurs pour y arriver.

function addTab (fileName) { 
    var url="http://localhost:8080/FDS/FastDictionarySearchServlet?filename=" + fileName ; 
    var tabs = $("#tabs").tabs(); 
    var ul = tabs.find("ul"); 
    $("<li><a href='" + url + "'>" + fileName + "</a></li>").appendTo(ul); 
    tabs.tabs("refresh"); 
} 

<div id="tabs"> 
    <ul> 
    </ul> 
</div>