Question

所以我的MVC应用程序在呈现我的视图时继续抛出状态代码为500的Http内部服务器错误。

它抛出的错误是JQuery“Uncaught TypeError：$（...）。select2不是函数”

Uncaught TypeError: $(...).select2 is not a function
    at HTMLDocument.<anonymous> (AddUser:381)
    at fire (jquery-1.11.0.js:3100)
    at Object.fireWith [as resolveWith] (jquery-1.11.0.js:3212)
    at Function.ready (jquery-1.11.0.js:3424)
    at HTMLDocument.completed (jquery-1.11.0.js:3454)

使用调试工具，它会抛出错误：

$('selectUser').select2();

这就是我调用脚本的方式：

@section Scripts {
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"></script>
    @Scripts.Render("~/bundles/forms")

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('selectUser').select2();
        });
    </script>

有些SO帖子表明，当您在脚本标记中省略type="text/javascript"或在引用CDN服务之前调用select2函数但是因为它清楚地显示在我的代码上时会导致此错误对于前面提到的一切似乎都很好。

根据这个Uncaught TypeError: $(...).select2 is not a function，我被告知要确保我是否加载了一个版本的JQuery并且看起来都很好

以下是我的查看中的一些其他代码，有助于重现问题：

<script>
    function submitForm() {

        var usersRoles = new Array;
        jQuery("#dualSelectRoles2 option").each(function () {
            usersRoles.push(jQuery(this).val());
        });

        var model = new Object();
        model.userId = jQuery('#selectUser').val();
        model.rolesList = usersRoles;

        console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
        console.log('JSON: ' + JSON.stringify(model));

        jQuery('#loading3').show();

        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("AddUser")",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(model),
            success: function (data) { showSuccessMessage(data); },
            failure: function (errMsg) {
                jQuery('#loading3').hide();
                alert(errMsg);
            }
        });
        return false;
    }

    //Shows the success message
    function showSuccessMessage(data) {
        jQuery('#loading3').hide();
        alert(data);
    }
</script>

控制器：

    public ActionResult AddUser()
    {
        if (TempData["StatusMessage"] != null)
        {
            ViewBag.StatusMessage = TempData["StatusMessage"].ToString();
        }
        else
        {
            ViewBag.StatusMessage = "";
        }
        AddUserToRolesViewModel vm = new AddUserToRolesViewModel();
        vm.Users = db.Users.ToList();
        return View(vm);
    }

修改只是为了确保JQuery Core没有加载两次（一次在Master中，一次在Content页面中） - 我已经为我的母版页添加了标记。

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="/favicon.ico" />
    @Styles.Render("~/Content/Template/css/style.css")
    <!--[if IE 9]>
        <link rel="stylesheet" media="screen" href="@Url.Content("~/Content/Template/css/ie9.css")"/>
    <![endif]-->
    <!--[if IE 8]>
        <link rel="stylesheet" media="screen" href="@Url.Content("~/Content/Template/css/ie8.css")"/>
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" media="screen" href="@Url.Content("~/Content/Template/css/ie7.css")"/>
    <![endif]-->
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/custom/general.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/ui.spinner.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery.jgrowl.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery.alerts.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/custom/elements.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/colorpicker.js")"></script>
    <!--[if lt IE 9]>
                <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/excanvas.min.js")"></script><![endif]-->


    <title>@ViewBag.Title</title>

</head>
<body class="loggedin">
    @Html.Partial("_Header_top")

    <!-- START OF MAIN CONTENT -->
    <div class="mainwrapper">
        <div class="mainwrapperinner">
            @Html.Partial("_Menu_left")
            <div class="maincontent">
                <div class="maincontentinner">
                    @RenderBody()
                </div>
                <div class="footer">
                    @Html.Partial("_Footer")
                </div>
            </div>
        </div>
    </div><!--mainwrapper-->
    <!-- END OF MAIN CONTENT -->
</body>
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jqueryval")
</html>

更新II： 所以我继续前往我的App_Start文件夹并导航到我的BundleConfig.cs，在那里我发现了一些内容：

   public static void RegisterBundles(BundleCollection bundles)
   {
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                         "~/Content/Template/js/plugins/jquery-ui-
                1.8.16.custom.min.js"
   }

根据此链接：Usage of the ASP.NET MVC4 jquery/javascript bundles我意识到文件"~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js"已被添加到此捆绑包中，并在我的内容页面（AddUser.cshtml）中引用为：

 <script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"></script>

此时，我强烈认为这将解决问题，因此我在内容页面中删除了此引用，因为我相信这可能会加载JQuery核心两次，但仍然没有。错误仍然存在。我还能做些什么来尝试解决这个问题？

值得一提的是，所有浏览器（Chrome，IE和Firefox）都存在此错误

无法加载资源：未捕获TypeError：$（...）。select2不是函数

0 个答案: