1

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

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

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

切换Tab项并使用firebug查看html body信息，我注意到每次切换操作都会追加一个新的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>
4

2 回答 2

0

通过将该块放入 try catch 块中，我能够优雅地处理这个问题。尝试这个。

try{
    code here...
}catch(exception){ 
   error ... 
}
于 2013-11-01T23:56:09.670 回答
0

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

于 2013-05-16T04:52:22.820 回答