#section Scripts
{
<script type="text/javascript">
function greySubmit() {
if (document.getElementById('qa1') != Request.Form[A] ||
Request.Form[B] || Request.Form[C] || Request.Form[D])
{
document.getElementById('submit').disabled();
}
}
</script>
<script type="text/javascript">
function returnSubPage() {
return Redirect("~/Home/Submitted");
}
</script>
}
When the view runs, these are completely skipped over. Also, these are in my layout file.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/admin")
#RenderSection("scripts", required: false)
I'm confused as to why these won't run? I know they don't because I added breakpoints to my code and it never actually hits these. The file is fairly large, so I think that there maybe could be something overriding it but I want to make sure that I'm not missing something.
Related
I was following the documentation on socket.io website when I found this problem.
My working code
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$(function () {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
})
</script>
When the same jquery script is imported from an external file, it fails.
client.js contains the exact same jquery script and in the same directory.
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="client.js"></script>
Below was the error from console, I'm not able to figure out what it is
The resource from “http://localhost:3000/client.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Change your type to "application/javascript" for that script. Also, if you find that the script isn't loading, add the defer property to the script tag like below.
<script type="application/javascript" defer src="./client.js"></script>
Lastly, I've seen similar issues where the js isn't located at the source you're referencing. Please make sure your source link is correct.
This seems to be a common problem: Stray start tag returned by the Nu HTML Checker. My HTML reads </body>, while the Checker says </body>↩<script>'undef. The only usage of <script> is as follows:
<script src="Sternheimer.js"></script>
<!--<script src="../jquery-2.1.4.min.js"></script>-->
<script src="../jquery-3.1.1.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']]
},
menuSettings: { inTabOrder: false }
});
</script>
<script type="text/x-mathjax-config">
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
MathJax.Hub.Config({
"HTML-CSS": { scale: 90 }
});
}
</script>
<script src="../MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="initializeForm.js"></script><!--run on page load-->
<script src="formFields.js"></script><!--reveal additional fields-->
<script src="../smoothScroll.js"></script>
<script src="../backToTop.js"></script>
... which is of course inside <head>. SO search results say the Checker could be misinterpreting comments, which I've checked by getting rid of <!--<script src="../jquery-2.1.4.min.js"></script>--> but the error persists. My markup is always validated using the W3C extension in Brackets. Please see the Nu result here. Any help resolving this mystery will be appreciated.
Update | Viewing the source on my hosting's server, I discovered the following was appended to my original markup: <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'a2plcpnl0819'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script>. Mystery solved, and this appears to be fixable. Thank you for your help.
It is not a bug. I can type curl http://handcrafted.codes/Sternheimer/Sternheimer.htm and see the script tag after the body end tag.
Presumably you are using hosting which injects snoop code at the end of HTML documents.
I am linking to the jQuery Mobile stylesheet on a CDN and would like to fall back to my local version of the stylesheet if the CDN fails. For scripts the solution is well known:
<!-- Load jQuery and jQuery mobile with fall back to local server -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.6.3.min.js'%3E"));
}
</script>
I would like to do something similar for a style sheet:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
I am not sure if a similar approach can be achieved because I am not sure whether the browser blocks in the same way when linking a script as it does when loading a script (maybe it is possible to load a stylesheet in a script tag and then inject it into the page) ?
So my question is: How do I ensure a stylesheet is loaded locally if a CDN fails ?
One could use onerror for that:
<link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" />
The this.onerror=null; is to avoid endless loops in case the fallback it self is not available. But it could also be used to have multiple fallbacks.
However, this currently only works in Firefox and Chrome.
Update: Meanwhile, this seems to be supported by all common browsers.
Not cross-browser tested but I think this will work. Will have to be after you load jquery though, or you'll have to rewrite it in plain Javascript.
<script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
var rules = sheet.rules ? sheet.rules : sheet.cssRules;
if (rules.length == 0) {
$('<link rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
}
}
})
</script>
Assuming you are using the same CDN for css and jQuery, why not just do one test and catch it all??
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" /%3E'));
document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-1.6.4.min.js" %3E%3C/script%3E'));
document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-ui-1.8.16.custom.min.js" %3E%3C/script%3E'));
}
</script>
I guess the question is to detect whether a stylesheet is loaded or not. One possible approach is as follows:
1) Add a special rule to the end of your CSS file, like:
#foo { display: none !important; }
2) Add the corresponding div in your HTML:
<div id="foo"></div>
3) On document ready, check whether #foo is visible or not. If the stylesheet was loaded, it will not be visible.
Demo here -- loads jquery-ui smoothness theme; no rule is added to stylesheet.
this article suggests some solutions for the bootstrap css
http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
alternatively this works for fontawesome
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
(function($){
var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
if ($span.css('fontFamily') !== 'FontAwesome' ) {
// Fallback Link
$('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
}
$span.remove();
})(jQuery);
</script>
You might be able to test for the existence of the stylesheet in document.styleSheets.
var rules = [];
if (document.styleSheets[1].cssRules)
rules = document.styleSheets[i].cssRules
else if (document.styleSheets[i].rules)
rule= document.styleSheets[i].rules
Test for something specific to the CSS file you're using.
Here's an extension to katy lavallee's answer. I've wrapped everything in self-executing function syntax to prevent variable collisions. I've also made the script non-specific to a single link. I.E., now any stylesheet link with a "data-fallback" url attribute will automatically be parsed. You don't have to hard-code the urls into this script like before. Note that this should be run at the end of the <head> element rather than at the end of the <body> element, otherwise it could cause FOUC.
http://jsfiddle.net/skibulk/jnfgyrLt/
<link rel="stylesheet" type="text/css" href="broken-link.css" data-fallback="broken-link2.css">
.
(function($){
var links = {};
$( "link[data-fallback]" ).each( function( index, link ) {
links[link.href] = link;
});
$.each( document.styleSheets, function(index, sheet) {
if(links[sheet.href]) {
var rules = sheet.rules ? sheet.rules : sheet.cssRules;
if (rules.length == 0) {
link = $(links[sheet.href]);
link.attr( 'href', link.attr("data-fallback") );
}
}
});
})(jQuery);
Do you really want to go down this javascript route to load CSS in case a CDN fails?
I haven't thought all the performance implications through but you're going to lose control of when the CSS is loaded and in general for page load performance, CSS is the first thing you want to download after the HTML.
Why not handle this at the infrastructure level - map your own domain name to the CDN, give it a short TTL, monitor the files on the CDN (e.g. using Watchmouse or something else), if CDN fails, change the DNS to backup site.
Other options that might help are "cache forever" on static content but there's no guarantee the browser will keep them of course or using the app-cache.
In reality as someone said at the top, if your CDN is unreliable get a new one
Andy
Look at these functions:
$.ajax({
url:'CSS URL HERE',
type:'HEAD',
error: function()
{
AddLocalCss();
},
success: function()
{
//file exists
}
});
And here is vanilla JavaScript version:
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
if (!UrlExists('CSS URL HERE') {
AddLocalCss();
}
Now the actual function:
function AddLocalCss(){
document.write('<link rel="stylesheet" type="text/css" href=" LOCAL CSS URL HERE">')
}
Just make sure AddLocalCss is called in the head.
You might also consider using one of the following ways explained in this answer:
Load using AJAX
$.get(myStylesLocation, function(css)
{
$('<style type="text/css"></style>')
.html(css)
.appendTo("head");
});
Load using dynamically-created
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
.appendTo("head");
Load using dynamically-created <style>
$('<style type="text/css"></style>')
.html('#import url("' + myStylesLocation + '")')
.appendTo("head");
or
$('<style type="text/css">#import url("' + myStylesLocation + '")</style>')
.appendTo("head");
I'd probably use something like yepnope.js
yepnope([{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}]);
Taken from the readme.
//(load your cdn lib here first)
<script>window.jQuery || document.write("<script src='//me.com/path/jquery-1.x.min.js'>\x3C/script>")</script>
I am trying to implement this code here
but I get no results while running the project.
here is my code:
View:
<input type="text" name="names" value="" id="typeahead" data-provide="typeahead" autocomplete="off" />
Again on view (index.cshtml):
<script type="text/javascript">
$(function () {
$('#typeahead').typeahead({
source: function (term, process) {
var url = '#Url.Content("~/index/GetNames")';
return $.getJSON(url, { term: term }, function (data) {
return process(data);
});
}
});
})
</script>
Controller (indexController.cs):
[HttpGet]
public JsonResult GetNames(string term)
{
// A list of names to mimic results from a database
List<string> nameList = new List<string>
{
"Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer", "Hadi"
};
var results = nameList.Where(n =>
n.StartsWith(term, StringComparison.OrdinalIgnoreCase));
return new JsonResult()
{
Data = results.ToArray(),
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
here are also the js scripts added at the end of the view page:
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
here is also the list of bugs I get on runtime:
Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught ReferenceError: intellisense is not defined jquery-1.9.1.intellisense.js:1
Uncaught TypeError: Object [object Object] has no method 'typeahead'
Please let me know what am i doing wrong!
This may be a bit old but you cannot use source: you must use either remote:, prefetch:, or local: as the error reads.
Which version of bootstrap are you using? The standalone plug-in no longer supports all of the different data providers in the same way as the old one did
First off, make sure you place the script tag referencing jquery first, before bootstrap. Also only load a single jquery script tag.
Like this:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
All the JS libraries you are using at the moment have one dependancy: jQuery so they need to be loaded in right order:
<!-- jQuery should always be the first -->
<!-- jquery-1.9.1.js and jquery-1.9.1.min.js are the same but .min version is minified and always lighter, so use it for faster page load -->
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<!-- Any other library should be loaded after jQuery -->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>
Hope this helps ;)
I'd like to execute a piece of JavaScript when a certain condition is true in my view model:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
executeJsfunction();
}
</script>
This code doesn't compile, how should I do this?
Try with this:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
#:executeJsfunction();
}
</script>
Note the "#:"
For multi-line script within the razor conditional block, you can use:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
<text>
executeJsfunctionOne();
executeJsfunctionTwo();
executeJsfunctionThree({
"var_one": true,
"var_two": false
});
</text>
}
</script>
This can make it cleaner and more practical than adding #: to each line. Everything within the <text></text> blocks is rendered as script.
If you have more complicated JS, you can do the following (script tags, or any tags, within an #if don't need extra escaping):
#if (Model.Employees.Count > 1)
{
<script type="text/javascript">
$(function() {
executeJsfunction();
});
</script>
}
Use js if-else block, not C#. Js has its own if-else block.
<script type="text/javascript">
if (#Model.Employees.Count > 1)
{
executeJsfunction();
}
</script>
The MVC variables are processed on the server side, the code is always trying to render the Javascript values in order to generate the HTML, please try the code below :
<script type="text/javascript">
#{if (Model.Employees.Count > 1)
{
#:executeJsfunction();
}
}
</script>
I hope this helps.
I know this question posted while ago however I added a new solution as an alternative solution:
you can inject your value from the model into data attribute of selected DOM's element and validate your condition by checking the value of the same data attribute you injected while building your view.
for example, check the following view and the script code snippet how to do it:
<div id="myDiv" data-count="#Model.Employees.Count">
</div>
<script>
if($("#myDiv").data("count") > 1){
executeJsfunction();
}
</script>
In case if you don't want to even render the java script based on some condition
define a section in your layout html
<html>
<body>
#RenderSection("xyz", required: false)
</body>
</html>
in your view
#if (Model.Condition)
{
#section xyz{
<script>
$(function () {
// Your Javascript
});
</script>
}
}
In my case I don't want to expose my Javascript if that feature is not enabled, also it'll reduce the size of the page