Question

我有一个MVC4页面，允许用户在保存到数据库之前选择并映像并添加注释。该页面还有一个jquery模式对话框，用于将新图像上传到目录。

这一切都运行良好但是在将VS2013项目迁移到新机器之后它似乎已经停止工作，在浏览器中使用IIS Express或发布的版本我得到了错误：

未捕获TypeError：对象[object Object]没有方法'dialog'

我已经尝试过关注其他帖子，这些帖子表明Jquery定义次数太多或者顺序错误但这似乎并没有解决我的问题。

_Layout页面是：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - ourLeaderboard</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")


    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")"
          rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")"
          rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")"
          rel="stylesheet" type="text/css" />
    <script src="~/Scripts/tinymce/jquery.tinymce.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")"
            type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")"
            type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")"
            type="text/javascript"></script>
    <script>
        $(function () {
            $('#my-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true
            });

            $('.modal').click(function () {
                $('#my-dialog').load(this.href, function () {
                    $(this).dialog('open');
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Pyecombe Golf Club", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Competitions", "Index", "Competition")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - ourLeaderboard, (C) Pyecombe Golf Club</p>
            <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"
                    type="text/javascript"></script>
        </footer>
    </div>

    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

我的观点如下：

    @model ourLeaderboardDev.Models.Message
@{
    ViewBag.Title = "Upload Image";
}
<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'TheTitle',
            modal: true,
            open: function(event, ui) {

            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('.ShowDialogButton').click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()


    <div class="form-horizontal">
        <h4>Competition News</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.Id)
        <div class="form-group">
            @Html.LabelFor(model => model.Message1, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Message1)
                @Html.ValidationMessageFor(model => model.Message1)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Message2, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Message2, new SelectList(ViewBag.myFiles).AsEnumerable())
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Message3, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Message3)
                @Html.ValidationMessageFor(model => model.Message3)
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}



<a href="#" class="ShowDialogButton">Upload Image</a>
<div id="dialog" class="dialog" title="TheTitle" style="overflow: hidden;">
    @using (Html.BeginForm("FileUpload", "Admin", null, FormMethod.Post, new { id = "FileUploadForm", enctype = "multipart/form-data" }))
    {
        <input type="file" name="files" id="file1" size="50" />
        <input type="submit" id="submitFiles" name="submit" value="Upload Document" />
    }
    </div>

Answer 1

检查您是否包含

<script src="@Url.Content("~/Scripts/jquery.ui.dialog.min.js")"
        type="text/javascript"></script>

代码

Jquery模式不起作用：未捕获TypeError：对象[object Object]没有方法'对话'

1 个答案: