Question

我有一个应用程序使用“旧”版本的JQuery标签小部件来动态添加和删除标签，即它使用了tabs.add()和tabs.remove()。我花了两天的时间尝试使用tabs.refresh()获取“新的”方式，如JQuery升级指南中所述，但没有任何工作，但Chromium控制台上没有javascript错误。

这个网页包含我猜的官方JQuery示例代码： http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

这是mycode，什么都不做。它是升级指南中的剪切和粘贴：

<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" );
}

此函数像往常一样被调用，但ui没有变化。有什么想法吗？

这是整个申请。它显示文件选择器然后循环结果文件名列表，为每个文件名创建一个选项卡。在后端，服务器通过传递给选项卡的URL为每个选项卡提供内容。 jQuery UI选项卡 - refresh（）替换添加，删除

</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>

Answer 1

我最终想出了如何做到这一点。像往常一样我和JQuery，当你最终做到正确时它很简单但是需要大量的试验和错误才能到达那里。

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>

JQuery 1.10中的示例tabs.refresh（）不适用于我

1 个答案: