0

I am getting a jQuery is not defined error from jQuery validate being loaded before jquery.

I am not sure if this is involved with using ASP.net Boilerplate or not, though in the bundle config I have the following:

 bundles.Add(
            new ScriptBundle("~/Bundles/vendor/js/bottom")
                .Include(
                    "~/lib/json2/json2.js",
                    "~/lib/jquery/dist/jquery.min.js",
                    "~/lib/bootstrap/dist/js/bootstrap.min.js",
                    "~/lib/moment/min/moment-with-locales.min.js",
                    "~/lib/jquery-validation/dist/jquery.validate.min.js",
                    "~/lib/blockUI/jquery.blockUI.js",
                    "~/lib/toastr/toastr.min.js",
                    "~/lib/sweetalert/dist/sweetalert.min.js",
                    "~/lib/spin.js/spin.min.js",
                    "~/lib/spin.js/jquery.spin.js",
                    "~/lib/bootstrap-select/dist/js/bootstrap-select.min.js",
                    "~/lib/jquery-slimscroll/jquery.slimscroll.min.js",
                    "~/lib/Waves/dist/waves.min.js",
                    "~/lib/push.js/push.min.js",
                    "~/Abp/Framework/scripts/abp.js",
                    "~/Abp/Framework/scripts/libs/abp.jquery.js",
                    "~/Abp/Framework/scripts/libs/abp.toastr.js",
                    "~/Abp/Framework/scripts/libs/abp.blockUI.js",
                    "~/Abp/Framework/scripts/libs/abp.spin.js",
                    "~/Abp/Framework/scripts/libs/abp.sweet-alert.js",
                    "~/lib/flatpickr/dist/flatpickr.min.js",
                    "~/js/admin.js",
                    "~/js/main.js",
                    "~/Scripts/jquery.signalR-2.2.3.js",
                    "~/Views/Shared/_Layout.js"
                )
            );

So I am using the minified version of jQuery and the minified version of jQuery.Validate. As soon as I use the minified version of jQuery and I load a page, jquery.validate.min.js is the first script that gets loaded in and as expected it throws a jQuery is not defined. error. Though as soon as I do not use the minified version of jQuery (jquery.js) the scripts are loaded up in the correct order.

Is ASP.NET Boilerplate using any custom file ordering in the bundles that I do not know of? I do believe that MVC, but could be wrong, that it will process explicitly named scripts first in the bundle, then symbolically named scripts. Though these are all explicitly named scripts.

Is there something I am missing or some solution on how I can solve this?

twigman08
  • 482
  • 1
  • 5
  • 10
  • Not sure, why you get the order issue...but something else to verify - are all JS libraries updated? You can update them via the NuGet package manager and there you will see the version. Could be version mismatch and worth checking. – st_stefanov May 14 '18 at 19:23
  • 1
    Use `IBundleOrderer` https://msdn.microsoft.com/en-us/library/system.web.optimization.ibundleorderer(v=vs.110).aspx, this will make sure files are added in order. Also in this answer: https://stackoverflow.com/a/11995916/4851351 – pool pro May 14 '18 at 21:17
  • @st_stefanov I checked the NuGet Package manager updates and the only one would be bootstrap as I have not moved to bootstrap 4 on this project. jQuery Validate and jQuery are all on the latest versions. – twigman08 May 14 '18 at 21:40
  • @poolpro Adding my own `IBundleOrderer` that just returned the list as is seemed to work. Though I feel like it should be necessary as wouldn't the default bundle orderer promote jQuery before jQuery validate, if I remember right? And why it was only promoting jQuery Validate before jQuery when I used the minified version of jquery. – twigman08 May 14 '18 at 21:57
  • There is no need to use the minified versions. One of the features of bundles is they automatically minify the file in production, but use the non-minified version in debug –  May 14 '18 at 22:28
  • There has always been an issue with MVC5 and Bundling, The default MVC5 you will see they load jQuery separately and place it ahead of the rest in the layout page. i had looked it up a long time ago, and forget the Microsoft article that explains the loading on the files. hens why Microsoft has the sort order. – pool pro May 14 '18 at 22:50

1 Answers1

1

I ended up using an answer from here: https://stackoverflow.com/a/11981271/4201348

So pretty much I defined my own BundleOrderer called AsIsBundleOrder that implementsIBundleOrderer that just returned the files as is, and set that as the orderer to use in the BundleConfig.

That works, though still doesn't give me a complete answer as to WHY (the important reason in my mind) the default orderer was only promoting jQuery validate to be before jQuery only when I used the minified version of jQuery.

twigman08
  • 482
  • 1
  • 5
  • 10