I've just opened up a website for the first time in VS2013 and I'm getting Javascript exceptions when I run debugger:
Unhandled exception at line 194, column 21 in http://localhost:49809/
0x800a1391 - JavaScript runtime error: '$' is undefined
And here's the code:
<script type="text/javascript">
$(function () {
$('#one').ContentSlider({
width: '960px',
height: '250px',
speed: 400,
easing: 'easeOutSine'
});
});
</script>
Click Continue and I get a further exception:
Unhandled exception at line 37, column 59140 in http://localhost:52306/27fadf043d464a019907842c2a5a764e/browserLink
0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: unsupported pseudo: plusone
This website works fine live and debugs without issue in VS2012. I have a suspicion it's to do with referring to remote Javascript blocks (<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> and <script type="text/javascript" src="//apis.google.com/js/plusone.js">). Is there a permissions setting I need to amend?
Any help would be greatly appreciated.
Numb
This seems to be a bug in the new Browser Link feature of VS 2013. See Browser Link Feature. It is a way for dynamic communication between a running app and the Visual Studio.
From that article, you can turn off the feature by adding the following line to Web.config:
<appSettings>
...
<add key="vs:EnableBrowserLink" value="false" />
</appSettings>
It looks as though your script manager adds in the jquery reference in the body tag of a master page.
You're putting in your own script and referencing jquery using the '$' symbol before the master page gets to the body tag.
Just move your own script to after the body. If you're using a content placeholder then move the content placeholder after the body (and not in the 'head' section).
Related
Why is this simple code not working?
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.grid-lg').insertBefore('#menu-item-21');
});
</script>
I' read in console this error message:
Uncaught SyntaxError: Unexpected token <
at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
at Object.InjectedScript.evaluate (<anonymous>:664:21)
When I remove the script tag everything works!
When I add the beggining and ending script tag I got that error and I'm confused about why and how I fix it?
Thank you.
If "this simple code" is in a JavaScript file (not an HTML file), you don't want the script tags. Those are HTML. "Everything works" when you remove them because they don't belong there.
This HTML:
<script src="somefile.js"></script>
loads the script. somefile.js wouldn't have the tags in it, because the tags are HTML, not JavaScript:
jQuery(document).ready(function(){
jQuery('.grid-lg').insertBefore('#menu-item-21');
});
...if I added my code to the console with that...
If you mean you're pasting it into the web console, again, that's a JavaScript environment, not HTML. You don't want HTML tags there, either.
I'm trying to add Syntax Highlighter to my new blog at blogger. For some reason I keep getting these errors:
Uncaught ReferenceError: SyntaxHighlighter is not defined Uncaught
ReferenceError: XRegExp is not defined shCore.js:123 Uncaught
TypeError: Cannot read property 'config' of undefined
Here is my code:
<script src='https://xarpixels.googlecode.com/files/shAutoloader.js'/>
<script src='https://xarpixels.googlecode.com/files/shCore.js'/>
<script type="text/javascript">
$(document).ready(function(){
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
'js https://xarpixels.googlecode.com/files/shBrushJScript.js',
'php https://xarpixels.googlecode.com/files/shBrushPhp.js',
'sass https://xarpixels.googlecode.com/files/shBrushSass.js',
'sql https://xarpixels.googlecode.com/files/shBrushSql.js',
'xml https://xarpixels.googlecode.com/files/shBrushXml.js',
'css https://xarpixels.googlecode.com/files/shBrushCss.js'
);
SyntaxHighlighter.all();
});
</script>
To me, everything looks correct?
EDIT: I noticed that when I change the path to any of the files in the demo, the script breaks and doesn't work. This isn't making any sense at all...
I followed this method here: http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
It may not be using the autoloader(as I want to prevent http requests), but it gives me a working example to work from and perhaps I can get the autoloader working.
Thanks.
Easy alternatives using highlight js will be very easy and has many very interesting views
for demo see here from the official website
<!– Syntax highlighter –>
<link href=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css’ rel=‘stylesheet’/>
<script src=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js’/>
<script>hljs.initHighlightingOnLoad();</script>
<!– end Syntax highlighter –>
I'm trying to get the example code in this SO question running on my system
getting the X/Y coordinates of a mouse click on an image with jQuery
It displays the position of the mouse on a click inside a div. It works fine on Firefox and Safari but doesn't update on Chrome and I'm wondering if I've done something wrong.
I'm using Google Chrome Version 23.0.1271.101
Here's the code I'm using.
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<p>Click to see the position!</p>
<div class="box" style="width: 200px; height: 200px; background: #F00"> </div>
<p id="position">Position will go here</p>
<script>
$(document).ready(function() {
$('.box').click(function(e) {
var offset = $(this).offset();
$('#position').html(Math.round(e.clientX - offset.left) + ", " + Math.round(e.clientY - offset.top));
});
});
</script>
</body>
</html>
Update:
Here is the error I see on Chrome's JavaScript console Uncaught ReferenceError: $ is not defined but I'm not sure what to make of it.
Update2:
I cleared the browser cache and reloaded the page while having the JavaScript console open and noticed an error I had not seen before
[blocked] The page at https://<mywebsite>/index.html ran insecure content from http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.
Uncaught ReferenceError: $ is not defined
So, I downloaded jquery.min.js and placed it in the same directory as index.html and changed the loading of the script to
<script src="./jquery.min.js" type="text/javascript"></script>
It now works on all three browsers.... so for some reason Chrome was the only one that complained about the url for jquery.min.js being insecure. To compound the problem, it didn't give me that error when I went into the JavaScript console, and I didn't see it until I had cleared the cache and I had the JavaScript console open.
The error you are getting is that jQuery is not loaded when executing your script. So therefore $ is not defined when you try to use it.
Also, your screenshot is not showing the same markup as your example.
I'm working with ASP.Net MVC4 wiht view engine Razor. I like put mask date and time in TexBoxFor I installed for nugget jquery.maskedinput-1.3.min.js and add in the view
(document).ready(function () {
$("#FechaDen").mask("99/99/9999");
$("#HoraDen").mask("99:99:99");
});
But I have this error: Uncaught TypeError: Object [object Object] has no method 'mask'
How I can resolve this problem?
You seem to have forgotted to reference the jquery.maskedinput plugin in your page:
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.maskedinput-1.3.min.js")"></script>
Make sure that the path is correct and that the plugin is actually situated in this folder. Use the Network tab of a javascript debugging tool such as FireBug to ensure that there are no 404 errors with your script references.
Also make sure that you have added this script inclusion after jQuery. Be careful because in the ASP.NET MVC 4 Internet Project Template, the ~/Views/Shared/_Layout.cshtml file renders jquery as a bundle at the end of the DOM:
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
So if you are putting this reference inside your view make sure that this happens inside the scripts section:
#section scripts {
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.maskedinput-1.3.min.js")"></script>
<script type="text/javascript">
$("#FechaDen").mask("99/99/9999");
$("#HoraDen").mask("99:99:99");
</script>
}
Also notice that since this script is now at the end of the DOM I have gotten rid of the $(document).ready call which is no longer necessary (and which you got wrong in the code you have shown because you forgot to prefix it with a $).
I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.
Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.
I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.
Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.