Question

最近，我使用jQuery UI Tab和Dialog控件开发了我的主页面。主UI中有两个选项卡，一个用于“Book”表单，另一个用于“Paper”表单（Book and Paper是我的业务实体页面）。当我第一次运行程序时，一切正常，但第二次不能正常工作，它会引发异常：

Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

尝试多次之后，我不使用Tab控件，只需在主页上放两个按钮，并执行类似的任务，即使我多次运行，一切都很好。所以我认为这是Tab控制的问题。

切换Tab项目并使用firebug来观看html正文信息，我注意到每次切换操作都会附加一个新的div行：

<div id="tabsProductMain" class="tabs-bottom ui-tabs ui-widget ui-widget-content ui-corner-all">
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true">
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;" aria-live="polite" aria-labelledby="ui-id-3" role="tabpanel" aria-expanded="true" aria-hidden="false">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-bottom ui-corner-all" role="tablist">
</div>
<div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="outline: 0px none; z-index: 1002; position: absolute; height: auto; width: 400px; top: 39.0003px; left: 428px; display: none;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-2">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">

你可以看到有太多新的丰富div元素附加在 tabindex =“ - 1”和 aria-labelledby =“ui-id-1”

有人能找到解决这种情况的解决方案吗？否则，它将在第二次操作中抛出错误。也许我通过使用Tab控件错过了一些观点？有人可以提出任何建议吗？感谢。

主页面代码在这里：

<script>    
$(function () {
            $("#tabsProductMain").tabs();

            $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
                .removeClass("ui-corner-all ui-corner-top")
                .addClass("ui-corner-bottom");

            $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

            initializeTabs();
        })

        function initializeTabs() {
            var urlBook = "/DialogWebApp/ProductMain/BookDialog";
            var urlPaper = "/DialogWebApp/ProductMain/PaperDialog";

            //dynamically add new tab item
            $("#tabsProductMain").tabs('add', urlBook, 'Books');
            $("#tabsProductMain").tabs('add', urlPaper, 'Papers');

            //remove the default one
            $("#tabsProductMain").tabs('remove', 0);
        }
</script>

    <div id="tabsProductMain" class="tabs-bottom">
        <ul>
            <li><a href="#fragement-1"><span>One</span></a></li>
        </ul>
        <div id="fragement-1"  style="width:600px;height:500px;"></div>
    </div>

BookDialog代码在这里，PaperDialog代码与BookDialog类似：

<script type="text/ecmascript">
    $(function () {
        $("#BookDialog").dialog({
            autoOpen: false, width: 400, height: 330, modal: true, title: "Book Form"
        });
        $("#BookDialog").html("").load("/ProductWebPortal/Product/Detail2/5")
    })

    function onOpenBookDialog() {
        $("#BookDialog").dialog("open");
    }
</script>
<div>
    <input type="button" id="btnOpenDialog" value="open book" onclick="onOpenBookDialog();"/>
    <div id="BookDialog" style="display:none;width:550px;height:550px;">simple div</div>
</div>

Answer 1

有时，这是由同一页面上的其他jquery错误引起的。我在同一页面上有日期选择器和对话框。日期选择器有错误。我试图打开一个不相关的对话框，我遇到了与你问的相同的错误。修复了日期选择器错误后，初始化的错误消失了。

Answer 2

我能够通过将该块放入try catch块来优雅地处理它。试试这个。

try{
    code here...
}catch(exception){ 
   error ... 
}

JQuery UI选项卡和对话框：错误：在初始化之前无法调用对话框上的方法;试图调用方法'打开'

2 个答案: