I am using Twitter Bootstrap Installed Using Buget to an ASP.NET MVC Application. I am however surprised to find that all my bootstrap JavaScript which used to work on localhost and in fact still do have all stopped working when uploaded to my web hosting provider.
I am completely bumped on this and I cant seem to figure out what is wrong.
Some of your scripts, which depend on jQuery, are being included before jQuery had been loaded.
bootstrap-dropdown.js is included before jQuery
your custom javascript on line 75 is included before jQuery
I'd suggest moving
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
and your custom javascript from line 75, to the bottom of your page, after the jQuery bundle is included. Or alternatively move your jQuery bundle into your <head>. It's your preference as to which - see this question: Should Jquery code go in header or footer? regarding that particular issue...
You say it's working on your local box and not on the remote server - if that's really the case then my best guess is that this is to do with the fact that bundling/minification works differently depending on whether you are in debug or release mode.
UPDATE
Basically, in a debug build, no bundling/minification is performed on your scripts and css. Each <link> and <script> that you reference in your bundles will be included as a separate file, with no transformations applied to them. In release builds, files in a bundle are concatenated together into one file, and transformations such as minification are applied to them. As per your comment, in order to get the debug behaviour in both your local and published sites, I see 3 options:
1. In your release build, set the compilation debug flag to true in your web.config.
i.e.
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
I wouldn't particularly recommend this, as your release build shouldn't generally be flagged as being debug. But this is a useful setting to quickly toggle on your release build to check if your javascript/css works correctly when it is off.
2. In code, turn off bundling optimizations in your bundle table.
public static void RegisterBundles(BundleCollection bundles)
{
// other code...
BundleTable.EnableOptimizations = false;
}
3. Don't do it.
The difference in behaviour is by design, and makes sense - on your local box doing development, you can see all the individual script/css files and in unminified form, which makes debugging far easier. When published, the files are squashed down into one single, compressed file, which will reduce load time for your site.
I'd personally recommend option 3, and just make sure your styles/scripts are being included in the correct order.
In your page you have
<link href="/Content/bootstrapcss" rel="stylesheet"/>
... there's a blip with the file type, maybe this should be
<link href="/Content/bootstrap.css" rel="stylesheet"/> ?
And there's a path problem with your Modernizr file, check that the path is correct and the file exists:
http://bipscore.com/Scripts/modernizr-1.7.min.js
There may be other issues, but wouldn't hurt to get these two corrected first.
Good luck!
Related
I'm experimenting with Vite, VueJS 3 and vite-plugin-singlefile for an app which is bundled to a single HTML file, and then served inside a sandboxed iframe through a parent site I don't have much control to change.
Specifically, the iframe runs sandboxed with <iframe src="someotherorigin/page.html" sandbox="allow-scripts allow-same-origin allow-forms">. My built HTML page references some external scripts via CDN (e.g. Bootstrap, etc), but the actual app code itself is inlined.
The app works fine with Vite's dev server and build+serve option. It's also fine when I preview in other tools... But in the target environment it seems like the main entrypoint script simply doesn't run. Nothing renders but also no error messages in console. I do get a couple of warnings about malformed CSP, but that's all:
Content Security Policy: Interpreting none as a hostname, not a keyword. If you intended this to be a keyword, use 'none' (wrapped in single quotes).
Content Security Policy: Interpreting https://none as a hostname, not a keyword. If you intended this to be a keyword, use 'none' (wrapped in single quotes).
This question got me curious so I tried manually editing the built index.html to change the inlined <script type="module">...</script> to <script>...</script> - And it works fine!
...But:
I can't make that change in the source index.html (Vite just ignores & refuses to bundle the TypeScript /src/main.ts source unless "module" is set)
I don't think there's an easy way to automate changing it in the build pipeline either (seems like it'd be messing around with custom Vite plugins)
I don't really understand what's wrong in the first place - why would type="module" cause the iframe not to run this Vue-generated script? Is there some other more proper fix?
I have site-wide js file (site.js) that goes out with every request.
I have 2 actions on the controller: Action1 and Action2. Each of these actions has a view. Each view references a view-specific js (action1.js and action2.js).
I would like to bundle site.js with action1.js when Action1 method is executing. And when Action2 method, I want to bundle site.js with action2.js.
The bundling should be done at build time.
Is this possible with .Net Core 1.x?
It's possible, but there's a lot of menial work involved, because you'll need to manually describe each view's bundle.
Everything you need to know can be found in the official documentation, but here's the gist of it:
Action1.cshtml
I assume that for debugging purposes, you want to include both files on your dev box, while you only want the bundle in production. In your view, you add the following tags:
<environment names="Development">
<script src="site.js"></script>
<script src="action1.js"></script>
</environment>
<environment names="Staging,Production">
<script src="view1.js" asp-append-version="true"></script>
</environment>
When in development, your two files will be included as is, while in production, the bundled file view1.js will be included.
asp-append-version is part of the cache busting mechanism: it will append the file's version to each request to that file (details here).
Create your bundled view1.js
There's a number of various possibilities to create the bundle, but they all revolve around the bundleconfig.json file. The simplest solution uses he BuildBundlerMinifier NuGet package, and simply requires you to add it to your project.
bundleconfig.json would look like this:
[
{
"outputFileName": "wwwroot/js/view1.js",
"inputFiles": [
"wwwroot/js/site.js",
"wwwroot/js/action1.js"
]
},
]
Repeat for each view
This is where things get boring, because you'll need to repeat this for each view.
I have included a bootswatch theme in my website.
<!-- Bootstrap CSS served from a CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">
<!-- Scripts -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem is that bootstrap.min.css file loads twice. I can see it twice in resources when I open developer console on any browser. It is the same file because I can see that it is loaded by the same html line. Because of this, when I want to close a collapse or a menu, it just closes and opens again fast. I have no idea why it loads twice. How can I fix this?
I can think about two reason for your issue---
No.1
You have a plugin that uses bootstrap and it is loading the additional cdn.
No.2
You are adding some include file in your page which have the bootstrap cdn inside it. Hence your main page loads two bootstrap cdn.
Suggestion
Try removing bootstrap cdns from the bootswatch theme. As I am assuming that your website has already bootstrap cdn included in it.
I know it's a old thread, but I was searching for the same and also found the answer.
Remove integrity attribute from the url and it downloads only once.
This new attribute integrity attribute which I think is what makes the browser to call the cdn the first time to check that the file is not manipulated and then the second call happens to load the file.
Somehow it is flawed and should not download twice.
I'm fresh Dart appretience and I'm trying the 'one-hour-codelab' tutorial. I'm using IntellijIDEA 14 and its Dart plugin.
When I build 'Debug', everything works OK in Dartium.
When I build 'Release', Dart code gets translated into Javascript, but HTML code is still referencing the Dart source file.
I assume there is some solution for this, do you know it?
Thanks
Rene
The source is meant to still point at the .dart files, since if the browser has a Dart VM in it, you want to use that rather than the generated JS. It's the job of the dart.js script (which is part of the browser package) to figure out if the browser you are running on has a Dart VM or not, and if not, to substitute in the appropriate JS scripts.
For example, the source of your index.html file might look like this:
<html><body>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body></html>
In browser with the Dart VM (like Dartium) the dev tools will show those same script tags. However, in vanilla Chrome or another browser, the HTML you see in the dev tools will look like this:
<html><body>
<script type="application/dart" src="http://localhost:8080/main.js">/script>
<script src="packages/browser/dart.js"></script>
</body></html>
This is because the dart.js script has replaced the main.dart script with the corresponding JS file.
If you aren't seeing this translation happen, make sure that you are including the dart.js script in your index.html file, and that you are using the browser package by adding it to the dependencies of you pubspec.yaml file:
dependencies:
browser: any
It's worth noting that the --mode=release option for the pub build command doesn't include the .dart files in its output, but other modes will (https://www.dartlang.org/tools/pub/cmd/pub-build.html). I suppose that since no browsers in the wild currently have a Dart VM in them, that pub build assumes you only want to release JS files. I suspect this might change if/when vanilla Chrome gets the Dart VM added in. In the meantime, after you build your project, if you want it to also work in Dartium, you'll need to add in the .dart files to the build output. If you wanted to get extra fancy, you could minify your Dart first by using dart2js with the --output-type=dart flag set (https://www.dartlang.org/tools/dart2js/#options).
I've noticed that when working on a meteor application it will auto refresh the entire page when any stylesheets have changed. Is there a way to make it only refresh the stylesheet assets similar to how LiveReload works?
Also note that I'm using stylus for my stylesheets. Is that what's causing the full reload?
No, out-of-the-box Meteor will reload the entire app when it detects a file change of any type (whether html, css, or js). It doesn't matter if you're using stylus or not.
I imagine future iterations may take a page of out LiveReload for images and css files (so changing them does not cause a refresh), but for the time being the whole site will reload. In fact, this would probably be a fantastic pull request.
The current workaround I found is to use the "regular way" of adding css files:
Put your file myCss.css into the public folder "/public/myCss.css" so that it is not compiled by meteor
Add the following line to your html file:
<link rel="stylesheet" type="text/css" href="/myCss.css" />
Use a live editor such as Espresso or CSSEdit to change the myCss.css file.
Note that once you save the file, meteor will reload anyway. But in the following case:
- You are running meteor in production mode
- Your .css file is not in any folder contained into the meteor project (like you serve the .css file from somewhere else my yourself)
- Your file or folder is starting with a dot "." or ending with tilde "~", in this case, meteor will not reload those files if they did changed. Note that I never have been able to make this work with the ending tilde, moreover working with invisible files (starting with ".") is not very convenient. See here for ref.