locked
Error occurred in JQuery ,c# mvc, bootstrap modal RRS feed

  • Question

  • User-199788946 posted

    I have a button like:

    <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="@Url.Action("Create","User")" id="btnCreateUser">
    <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add User
    </button>

    my createUserContainer:

    <div class="modal fade" id="createUserModal" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" data-backdrop="static">
    <div id="createUserContainer">
    </div>
    </div>

    my modal:

    <div class="modal fade" id="createUserModal" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" data-backdrop="static">
    <div id="createUserContainer">
    </div>
    </div>

    My JQuery code like:

                $("#btnCreateUser").on("click", function () {
                    debugger;
    
                    var url = $(this).data("url");
    
                    $.get(url, function (data) {
                        $('#createUserContainer').html(data);
    
                        $('#createUserModal').modal('show');
                    });
    
                });

      while I open console it says:

    1) jquery-ui-1.12.1.min.js:6 Uncaught ReferenceError: jQuery is not defined

    2) Uncaught ReferenceError: jQuery is not defined query-3.2.1.min.js:2 jQuery.Deferred exception: $(...).counterUp is not a function TypeError: $(...).counterUp is not a function

    I have reference all of this in my layout folder. when I click button noting happen

    Wednesday, May 20, 2020 3:58 PM

Answers

  • User-474980206 posted

    Pretty simple, JQueryUI has to come after jquery.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 20, 2020 11:03 PM
  • User1686398519 posted

    Hi,  jameslovemicrosoft

    First of all, as bruce said, "jquery-3.2.1.min.js" should be referenced before "jquery-ui-1.12.1.min.js". Modify your code as follows.

    <script src="~/Content/AdminAssets/js/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>    

    Secondly, I suggest that you can combine or bundle CSS, JavaScript or other files into one file, so that you don’t need to quote too much files on the page, which can improve the web page loading performance. You can refer to this link.

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 21, 2020 2:15 AM

All replies

  • User-474980206 posted

    You error is related to jquery-UI. You don’t show the jquery-UI code, but you are probably including the scripts in the wrong order.

    note: generally it’s a bad idea to mix bootstrap and jquery-UI (which is a dead product).

    Wednesday, May 20, 2020 4:52 PM
  • User-199788946 posted

    Hello, my reference order is 

        <link rel="shortcut icon" href="~/AdminAssets/images/favicon.ico">
        <link href="~/Content/Site.css" rel="stylesheet" />
    
        <link href="~/Content/AdminAssets/css/bootstrap.min.css" rel="stylesheet">
        <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <link href="~/Content/AdminAssets/css/slidebars.min.css" rel="stylesheet">
        <link href="~/Content/AdminAssets/css/icons.css" rel="stylesheet">
        <link href="~/Content/AdminAssets/css/menu.css" rel="stylesheet" type="text/css">
        <link href="~/Content/AdminAssets/css/style.css" rel="stylesheet">   
    
    
    
    
    
    
     <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
        <script src="~/Content/AdminAssets/js/jquery-3.2.1.min.js"></script>
    
        <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
        <script src="~/Content/AdminAssets/js/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script src="~/Scripts/notify.min.js"></script>
        <script src="~/Content/AdminAssets/js/popper.min.js"></script>
        <script src="~/Content/AdminAssets/js/jquery-migrate.js"></script>
        <script src="~/Content/AdminAssets/js/modernizr.min.js"></script>
        <script src="~/Content/AdminAssets/js/jquery.slimscroll.min.js"></script>
        <script src="~/Content/AdminAssets/js/slidebars.min.js"></script>
    
    
    
    what's wrong?
    
    
    
    



    Wednesday, May 20, 2020 5:03 PM
  • User-474980206 posted

    Pretty simple, JQueryUI has to come after jquery.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 20, 2020 11:03 PM
  • User1686398519 posted

    Hi,  jameslovemicrosoft

    First of all, as bruce said, "jquery-3.2.1.min.js" should be referenced before "jquery-ui-1.12.1.min.js". Modify your code as follows.

    <script src="~/Content/AdminAssets/js/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>    

    Secondly, I suggest that you can combine or bundle CSS, JavaScript or other files into one file, so that you don’t need to quote too much files on the page, which can improve the web page loading performance. You can refer to this link.

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 21, 2020 2:15 AM