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?
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.
Related
I have made changes to my css on my MVC5 project that are working as intended on my local version but when I deploy to Azure the changes are not working.
I have tried creating a min.css file but this did not work
Have you done a hard refresh and pulled a copy of the stylesheet from the server to see if the changes you made are actually there? Http caching could be the culprit depending on how you're packaging your CSS.
Next, check the page source to make sure that your page is actually requesting the stylesheet you think it is. For example, if your site is requesting styles.min.css but you only made changes to styles.css and didn't create a new minified version, that'll cause problems.
Third, I'd check the elements that do not have the styles you're expecting and trace the styles with something like Chrome Developer Tools to ensure that your styles aren't being overridden in a way you're not expecting.
I started a project using ng-admin by akveo https://github.com/akveo/ng2-admin. The PrimeNG website specifies that one needs to add jQuery ui datetimepicker and jQuery datepicker in order to use their Calendar component. I did an npm install jquery-ui --save and it installed the files. However I'm clueless on how to add the reference on the webpack file and reference it properly.
thank you.
Yes, we call libraries like jQueryUi and jQuery 'broken modules' because they execute and rely on eachother in the global context. There are a few different methods to shim these kind of modules.
Here is a list of different options (as the solution cam vary per library). I like using the ProvidePlugin or using alias and externals.
I had the same error message, without using webpack yet. The solution, for this specific message, is in fact to declare/include jQuery BEFORE primeng.
So I just moved up the html tag adding jQuery to my page(s) and it went fine after that.
I don't know how to use webpack, but if there is a declaration order, just declare jQuery (or its subscript datepicker and datetimepicker) before primeng.
I have an MVC 4.5 project that has most of the UI logic organized in jQuery plugins. I want to protect my code by minification and bundling (While I understand that minification will only do so much as far as protection, it's better than leaving formatted and documented source files on the server.)
Ideally, I want my dev server to work as is -- files are non-minified and separated. But, when I deploy to the production server, I want the source files to be removed and only minified bundles to be available. Also note, on many occasions my jQuery plugins load other plugins from JavaScript code (I use head.js), so I cannot use #Script.Render for that.
What technologies do I use -- built-in MVC bundling, SquishIt, Bundler or do I need to resort to MSBuild and Microsoft Axaj Minifier? To recap, I want to remove source JS files and just be left with minified bundles in production, and, preferably, find a way to not change head.js references based on whether files are minified or not.
Thanks for your advice.
Just thought I respond with what I ended up doing here:
To recap: I wanted to obfuscate my source files with minification while not exposing the source JS files in production. I also wanted for head.js to resolve source file URLs to bundle URLs:
Put all non-minified javascript files in a folder viewable only to Admin role
Used bundling built-in to ASP.NET MVC 4.5 to generate bundles
Pointed my head.js tag to an MVC controller that returned head.js code + a javascript array with an x-ref between raw URLs and bundle URLs (available from BundleTable static object)
Bundling occurs outside of ASP.NET membership, so bundles are generated and available to anonymous users even though the source files are in the folder only accessible by Admin. Then, the trick of dynamically augmenting head.js code with server-side generated bundle URLs takes care of calling bundles from JS files.
I'm working on an ASP.NET MVC 4 app. This app leverages bundling to improve performance. Previously, the app was using jquery.mobile-1.1.0.js. Everything worked fine. However, I've upgraded to JQuery Mobile 1.2 and when I load my screen, I always see a wait spinner. I've pinpointed it to the fact that both the standard and the minified versions are being referenced. When I look in my view-source after the page is loaded, I see the following at the top:
<script src="/Scripts/jquery.mobile-1.2.0.js"></script>
<script src="/Scripts/jquery.mobile-1.2.0.min.js"></script>
From what I can tell, this was generated from the following in my ASP.NET MVC .cshtml file
#Scripts.Render("~/bundles/jquerymobile")
In my BundleConfig.cs file, I have the following definition:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));
Essentially, I want to use the normal version when the debug="true" flag is set in my web.config compilation setting. However, when debug="false", I want to use the minified version. What am I doing wrong?
Thank you
This should happen automatically for you already (assuing the fileextensionreplacement lists still have the default "min" entry for when optimizations are enabled).
As a workaround, you could try this instead which should also work:
.Include("~/Scripts/jquery.mobile-{version}.js"));
This basically is similar to your * except it will regex match for version strings. Note, both this and what you have require that you only have the latest jquery in your Scripts folder, if you still have the 1.1 version there, you will end up with both versions in your page.
I have js lint installed in Vs 2010 as a extension through the extension manager.
It finds lots of errors but they are all from external plugins or from the jquery library. I am not going to go and fix stuff in an external plugin or jquery file. So how can I get it to not check these files?
I am also wondering how can I get it to ignore checking href links. I am using asp.net mvc so my links are like this
reg
So it can't find this path as it is the path to the controller action method not a file. So how can I get it to not look at these?
Thanks
You can exclude files (external plugins, jquery, etc.) from the JSLint validation process.
From here.
For the href issue, if you don't have any JS in your views, you could exclude those as well using the method above.