Failed to load resource: Uncaught TypeError: $(…).

2019-09-14 18:41发布

站内问答 / C#
2035 0 6

So my MVC application keeps on throwing an Http internal server error with status code 500 when it renders my view.

The error it is throwing is a JQuery "Uncaught TypeError: $(...).select2 is not a function"

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)

Using debugger tools, it throws the error here:

$('selectUser').select2();

This is how I call my script:

@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>

Some SO posts suggest that this error is caused when you omit type="text/javascript"in your script tag or when you call the select2 function before the reference to the CDN service but as it clearly shows on my code all seems fine regarding the aforementioned.

According to this Uncaught TypeError: $(...).select2 is not a function, I am told to make sure if I have one version of JQuery loaded and all seems fine

Here is some additional code from my View that will help in reproducing the problem:

<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>

Controller:

    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);
    }

EDIT: Just to make sure that JQuery Core didn't load twice (once in Master and once in Content page) - I have included the markup for my master page.

_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>

Update II: So I went ahead to my App_Start folder and navigated to my BundleConfig.cs and there I noticed something:

   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"
   }

According to this link: Usage of the ASP.NET MVC4 jquery/javascript bundles and I realized that file "~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js" had alreasdy been added to this bundle and referenced in my content page (AddUser.cshtml) as:

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

At this point, I strongly believed this was going to fix the problem and so I removed this reference in my content page because I believed that that could be loading JQuery core twice but still nothing. The error still persists. What else can I do to try solve this?

Worthy mention that this error persists across all browsers (Chrome, IE & Firefox)

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)