javascript - 当部分 View 加载到 Jquery 选项卡时，我尝试打开 Jquery 对话框时出错

Question

在我的 Asp.net mvc 网页上，我有三个选项卡。第一个用于编写消息，第二个用于选择收件人，最后一个用于验证。

• 在第一个主选项卡上，我有一个按钮，用于打开带有 Jquery UI 对话框弹出消息的预览
• 在第二个主选项卡上，我加载到另一个选项卡功能，两个 View 对我的每个收件人列表收费。

我不明白为什么在单击预览按钮时出现错误“无法在初始化之前调用对话框上的方法；试图调用方法‘打开’”。我在我的脚本文件中做了一些测试，我知道，当我在第二个主选项卡上加载 View 时，问题就出现了。我做了论文测试:

• 改变调用方式
• 调用一个非常简单的partialview
• 打开一个基本对话框
• 为对话框创建另一个 .js 文件

如果我删除 $('#AlertCreationTabs-1').html(result); 预览弹出窗口有效，但当我放回此行时出现错误。我不明白为什么它不起作用。

脚本文件:

$(function () {
    $('#dialogtest').dialog({
        autoOpen:false,
        closeOnEscape:true,
        show:'slow',
        modal:false,
    });
    $('#btnpreview').click(function() {
        $('#dialogtest').dialog("open");
    });
});

$(document).ready(function () {
    $("#AlertCreationTabs").tabs();
});

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        dataType:'html',
        url: '/Panels/ViewTest',
        contentType:"text/html; charset=utf-8",
    }).success(function (result) {
        $('#AlertCreationTabs-1').html(result);
    });
});

$(function () {
    $('#AlertLog_AlertStartDate').datetimepicker({dateFormat:'dd/mm/yy'});
});

$(function () {
    $('#AlertLog_AlertEndDate').datetimepicker({dateFormat:'dd/mm/yy'});
});

$(document).ready(function () {
    $('#myTab').turbotabs({
        mode: 'vertical',
        width: '100%',
        padding: '0%',
        textColor: '#000000',
        navBackground: '#f0f6fa',
        backgroundColor: '#f0f6fa',
        hoverColor: '#FFFFFF',
        hoverBackground: '#fab300',
        activeBackground: '#fab300',
        navTextShadow: 'off'
    });
});

查看:

<div id="dialogtest">Zogzog</div>
 <div id="myTab">
            <ul class="tt_tabs">
                <li class="active">Composition</li>
                <li>Recipient</li>
                <li>Validation</li>
            </ul>
            <div class="tt_container">
                <div class="tt_tab active">
                    @Html.AntiForgeryToken()
                    <div class="panel-outerform">
                        <div class="form-horizontal">
                            ...
                            <div class="buttonbox">
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <input type="button" id="btnpreview" value="Preview" class="btntemplate" />
                                    </div>
                                </div>
                            </div>
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="tt_tab">
                    <div class="panel-outerform">
                        <div class="form-horizontal">
                            <div class="tab-title">
                                <h3>Please Choose Recipient for this alert</h3>
                            </div>
                            <div id="AlertCreationTabs">
                                <ul>
                                    <li><a href="#AlertCreationTabs-1">IP group</a></li>
                                    <li><a href="#AlertCreationTabs-2">PC group</a></li>
                                </ul>
                                <div id="AlertCreationTabs-1">
                                </div>
                                <div id="AlertCreationTabs-2">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        ...

编辑:好的，现在可以正常工作了，但是我收到另一个错误，我希望在对话框打开时启动一个 Ticker 脚本 (jnewsticker)。我试图在 opt 中添加它:

    open:function (event,ui) {
        var separator ...
        var title ...
        var startdate ...
        document.getElementByid('alertdata').innerHTML = ... 
        $('#newsticker_1').newsticker({
            'showControls':false,
        });
   ),

我收到错误 TypeError:$(...).newsticker is not a fucntion。 Ticker 使用经典的 $('#dialogtest').dialog... 。我想我必须以不同的方式称呼这个公开事件

Answer 1

我觉得这个问题是 dialog 框特有的，因为您正在对它调用 open 方法，可能到那时它还没有创建。所以只需尝试以下选项一次:

$(function () {
    var opt = {
        autoOpen:false,
        closeOnEscape:true,
        show:'slow',
        modal:false,
    }; //store your options

    $('#btnpreview').click(function() {
         $('#dialogtest').dialog(opt).dialog("open"); 
         //Pass the options and create the dialog and then open it
    });
})