Coding ASP.net web app with visual studio, i never had any problem when chrome or firefox is the default explorer. But when it's IE, a new project called Script documents suddently appear in my project explorer and visual studio always shows that exception in the new project for every pages load :
JavaScript execution error: Unable to get the property "tagName" of a null or undefined reference
Which doesn't prevent the web app to work, it's just annoying to have to click on the window in visual studio every time i switch pages while debuging.
The window offers me to Stop, Continue, or Ignore.
Ignore make the window reappear instantly, continue make it disapear for a little while...
Haven't found anything that solve it on google, neither in here.
How can this be solved ? And how is explorer so different ?
Edit :
Taking this as an exemple, i'm pretty sure it SHOULD work :
jQuery is not defined twitter bootstrap
And still, the window always pop-up in my IE 11, saying that it haven't foud the tagName property.
So now my new question is, do i have to specify the tag name of every object because i use boothstrap ? Or is it something else that cause the problem ?
EDIT :
This is the Master Page's codes :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Canevas.master.cs" Inherits="MandatMobile.Canevas" %>
<%# Register Src="~/Controls/Menu.ascx" TagPrefix="ctrl" TagName="Menu" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" >
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server" style="position:absolute; left:10px;">
<asp:Image runat="server" ImageUrl="~/Img/Fullogo.jpg" ></asp:Image>
<h2 style="position:absolute; top:-5px; left:120px; width:1200px;" >
<asp:ContentPlaceHolder ID="title" runat="server" >
</asp:ContentPlaceHolder>
</h2>
<%if (Convert.ToInt32(Session["Level"]) != 1)
{ %>
<div style="position:absolute; top:110px; left:0px;">
<ctrl:Menu ID="Menu1" runat="server" ></ctrl:Menu>
</div>
<% } %>
<br /><br /><br /><br />
<asp:ContentPlaceHolder ID="BodyContent" runat="server" >
</asp:ContentPlaceHolder>
</form>
</body>
</html>
SOLVED :
It was ridiculus... there was another menu before i build this one, what i did was put the previous menu in HTML comment and code my new menu on the same page, but the menu in comment was still up and even though it was in comment it was still looking for it's references, just like it WASEN'T in comment... What the... i think that is going to be my new question
Ok A lot of questions lets answer one by one:
"But when it's IE, a new project called Script documents suddently appear in my project explorer ..."
This project as you called, is a mechanism of visual studio that allows the developers debug javascript in the IDE (Visual Studio), but this only work for IE, because, as long as I know, there wasn't no interesting from Microsoft (or the browsers creators) to make it work for other browsers.
If you want to understand better what is it and how to use, enable, disable see this post: Using Visual Studio to Debug JavaScript in IE.
"...and visual studio always shows that exception in the new project for every pages load :"
As #Mithun Pattankar commented in your question, probably this exception occurs in other browsers too, but when you use chrome or firefox, you will get this exception more quietly. To see you have to go to DevTools (F12 in chrome) or some other custom tool, only then will see it.
But because you have the debug javascript in VS enabled, when you used the IE, the exception was thrown in VS instead of the browser.
And still, the window always pop-up in my IE 11, saying that it haven't foud the tagName property.
So now my new question is, do i have to specify the tag name of every object because i use boothstrap ?
Ok some misguidance here. First the problem isn't with the tagName property. Let me explain:
The message error that you got was "Unable to get the property "tagName" of a null or undefined reference". See the code bellow:
var v1 = { aGenericPropertyName: 10 };
v1.aGenericPropertyName = 20;
var v2 = v1.aGenericPropertyName;
v1 = null;
//or:
v1 = undefined;
var v3 = v1.aGenericPropertyName;
In the last line, depending on the browser, you may get this exception:
"Unable to get the property "aGenericPropertyName" of a null or undefined reference."
Did you get it now? The problem isn't the property, is the object that call the property or more accuracy the absence of an object (null or undefined) in a variable (in my sample code the variable v1).
Or is it something else that cause the problem ?
Well here's the real problem, because this kind of error can occur basically in any part of any javascript code that you added to the page. So it's not possible to solve this only by looking superficially.
I have some suggestions if you want to try. First, make sure you have the correct files of bootstrap.js and jquery.js and they are compatible between itself. Second check if this error is occurring in one of your custom javascript files.
Beyond that we will only be able to help you, if you post the exact line of the exception and how file the error occurs.
Related
I've been using javascript and paperscript to make a test program and have an interesting problem. I got this error message: Uncaught ReferenceError: veiw is not defined, I realised that I had mis-spelled view and corrected it in my code. But for some reason the error message persised, I've restarted my computer and used ctrl+f to search for 'veiw' in my files, but still the error message persists.
Here is my current code:
console.log("Hi");
view.onFrame = function(event){
project.importSVG('.../mario.svg');
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./scripts/paper-full.js"></script>
<script type="text/paperscript" src="./scripts/script.js" canvas="myCanvas"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
</canvas>
</body>
</html>
And I don't know if this is relevant but there seems to be a file generated by paper js each time the webpage is loaded called VM followed by a number.
document.__paperscript__ = function(paper,project,setup,clear,paper) {var module = { exports: {} }; veiw.onFrame = function(event){
project.importSVG('.../mario.svg');
};
//paper.setup(htmlCanvas);
//paper.project.clear();
//paper.project.importSVG('mario.svg');
return module.exports;
}
As you can see both the type and a few comments that have since been removed from the source file are still here. But I have saved the file and reloaded the page (using the url:http://localhost:8000/html.html with python's http.server running the server).
I am clueless as to what is causing this, and I can't find a reference to veiw anywhere in any of my files. Please help me. I'm being haunted by a typo I made a week ago. It won't go away.
I figured it out. And I'm posting this so other people don't have the same problem. This occurs because chrome, which I am using saved webpages so they load faster, so when you change your code... it recognises that it is the same page and doesn't load the new stuff. This can be fixed by going to your chrome history chrome://history/ and clicking 'clear browsing data' then click 'advanced' select 'cached images and files' and unselect everything else, then just set the time at the top so that you don't delete too many things you don't want to.
NOTE:
Doing this wont delete any important data, the only reason not to select 'Time range: ALL TIME' is so that webpages load faster, which is the reason this data is stored in the first place.
I am at a complete loss here. I have a local version (3.6.0) of Jquery in my project and suddenly it stopped registering $() or Jquery() commands. Breakpoints loop endlessly if they hit, and that is a big IF. I do use F5 and F11 to traverse through the unending break points faster.
$(document).ready(function () {
alert("works");
});
With the above, which I have been using as a test to see if Jquery can function at all. I have two break points, one on line 1 and one on line 2; 1 hits, 2 never executes. So I THINK the issues is between the two. I am not sure how though.
I have stripped my application of any other libraries and reinstalled Jquery multiple times. below is my libman.json and a screen shot of my wwwroot expanded
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery#3.6.0",
"destination": "wwwroot/lib/jquery/"
}
]
}
And the layout razor file that I am using, which is in views/shared/_layout.cshtml
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html class="siteBackground" lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta charset="utf-8" />
<title>Lotus Transformation</title>
<script type="text/javascript" src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="~/CustomJavascript/LayoutResponsiveness.js"></script>
<link rel="stylesheet" type="text/css" href="~/CustomCss/LayoutCustom.min.css"/>
<link rel="stylesheet" type="text/css" href="~/CSS/CSSReset.css" />
</head>
<body class="LayoutBody">
<header class="header">
<a asp-controller="LotusGeneral" asp-action="Home"><img class="logo" src="~/Images/Logo/R.png" /></a>
<a asp-controller="LotusGeneral" asp-action="Home"><h1 class="title">LotusTransformation</h1></a>
<a asp-controller="LotusGeneral" asp-action="Home"><h2 class="subtitle">Holistic Health and Wellness Coaching</h2></a>
<nav class="navbar">
<ul class="navUl">
<a asp-controller="LotusGeneral" asp-action="Home"><li class="navLi">Home</li></a>
<a asp-controller="LotusGeneral" asp-action="About"><li class="navLi">About</li></a>
<a asp-controller="LotusGeneral" asp-action="Services"><li class="navLi">Appointments</li></a>
<a asp-controller="LotusGeneral" asp-action="Meditations"><li class="navLi">Meditations</li></a>
<a asp-controller="LotusGeneral" asp-action="Inspiration"><li class="navLi">Inspirations</li></a>
<li></li>
</ul>
</nav>
<a asp-controller="SignIn" asp-action="SignIn"><button class="LogInButton"> Log In/Sign Up</button></a>
</header>
<div class="SpecificPageContent">
#RenderBody();
</div>
<footer class="footer">
<p>©LotusTransformation LLC</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</footer>
</body>
</html>
I have no idea why jquery is not working, it has never given me this much trouble before. I feel like I am missing something obvious but cannot figure out for the life of me what it is.
The 14 warnings have to do with some normalization that is in my .scss file and does not impact anything that I have seen, furthermore, jquery was working fine yesterday evening and there were no changes made to the .scss file since yesterday afternoon.
I have:
Removed all other references to JQuery libraries (there is no jquery-ui,validation.js,etc.)
Uninstalled/reinstalled jquery through NPM and through adding a client side library
There is are no other libraries or packages installed, with the exception of the screen shot below.
Ensured jquery was the first script that is being loaded.
Searched multiple resources online and in via textbooks I have.
Any help is appreciated and thank you very much in advanced.
Well, I thought I had it fixed with the help of another user, however, JQuery has stopped functioning once again. The error I am getting is that it will not even hit a breakpoint. Not even $(document).ready(function() {}); is being hit. Here is the Jquery I am trying to get to work:
$(document).ready(function () {
var initial;
initial = $(window).width() * .75;
$('.navbar').css('right', initial);
var previous = 0;
$(window).on('resize', function () {
var navmoves = ((($(window).width() * .75) / 100));
if (previous == 0) {
if ((initial - navmoves) < 0) {
navmoves = -navmoves;
$('.navbar').css("right", navmoves);
} else {
$('.navbar').css("right", navmoves);
}
} else {
if (previous != 0) {
navmoves = previous - navmoves;
$('.navbar').css("right", navmoves);
}
}
previous = abs(navmoves);
});
});
I would understand it if a part of the code wasn't working, or there was a logical error, but Jquery to cease functioning entirely... I do not get it.
I fixed the quotation error pointed out earlier and it seemed to be working, however; it seems once I code something more involved it breaks. A simple alert call does not work. The only thing I have updated since it resumed functioning is the jQuery file, none of the packages, libraries, links etc. just this single file.
Ok, so I went through, commenting code in and out until I fixed the errors I had made (i.e hit a breakpoint and would it run through, move on to the next line/block depending on where I was at)
The short of it, I am too reliant on Intellisense in visual studio to catch and correct my C# syntax, for conditionals like if() statements. Jquery had a meltdown due to the space between the keyword and the parentheses.
I am fully aware I am not extremely versed in Javascript/Jquery, but I did not realize how much I relied on Intellisense to correct these errors I made. Also, I am pretty sure that a space between the if keyword and the opening parenthesis in C# does not produce an error, or that has been getting auto corrected without me noticing.
Basically, I could use more practice with Jquery and should not rely on the auto-correct features of the IDE I am using to catch things in different languages.
`
function init() {
var a = 'output of my processing';
alert('I am here'); // alert pops up
document.getElementById("<%=hdnField.ClientID %>").value = a;
}
<head>
<script src="../Scripts/myscripts.js"></script>
</head>
<body onload="init()">
<asp:HiddenField ID="hdnField" runat="server" />
</body>
`I have a page with lot of javascript; I am trying to clean it up by moving the scripts to a script folder and reference the path; Seems to work fine, except when it encounters 'document.getelementbyid(controlname.id)'- it throws 'TypeError: Cannot read property 'value' of null'
I understand it is not able to find the control. Why does that happen? I thought the DOM is already built - what difference does moving the javascript to a path make to that anyway? Any ideas on how to make it work? I would really like javascript to be moved from the page.
You're using ASP.Net inline calls inside your JS. This couldn't work, for two reasons:
It's likely you don't have your server configured to handle .js files using the ASP.Net processor.
Even if you did, the processing of the .js would be completely separate to the hosting .aspx page; meaning hdnField would not be in scope.
You would be better off passing knowledge about the items on your page directly to the JavaScript:
JS:
function init(config) {
var a = 'output of my processing';
alert('I am here'); // alert pops up
document.getElementById(config.hdnFieldID).value = a;
}
ASPX:
<head>
<script src="../Scripts/myscripts.js"></script>
</head>
<body onload="init({ hdnFieldID: '<%= hdnField.ClientID %>' })">
<asp:HiddenField ID="hdnField" runat="server" />
</body>
Hope that helps.
This answer assumes your directory structure is correct.
Move your script tag to the bottom of the body, just before . Here is a good SO answer to this question, and here is another.
In addition, in general, it's bad practice to call a JavaScript function from inside HTML elements. If you're not using jQuery, you can add a "DOMContentLoaded" event listener to run the code. With jQuery, the standard $(document).ready() has been proven to work well. Or, if you simply put your script tag at the bottom of the , and place init(); at the end of your JS file, it will all run properly. This would be for a very simple application, but simplicity is sometimes the best.
Finally, for a sanity check, you could hard-code the ID in your init function. I don't know asp.net, but you might want to check the output of <%=hdnField.ClientID %>. Are you sure you're getting the correct ID?
Good luck.
Goal:
To sum it up, I'm trying to replace an excel spreadsheet. I'm creating an application that will run in IE9, but does not connect to the internet or an intranet (I know, I know. Just bear with me. If you're curious read more below). It needs to use CRUD (create, read, update, and delete) methods on a set of data that changes daily. The dataset must persist even when the browser is closed.
Question:
What options are available, using javascript and html, for storing data on the local computer the web page is accessed on? I'm doing this at work, so there will be no server-side to this. I also will not be able to install any software on the computer, although I can download javascript plugins. The webpage will be loaded from a file on the computer, using Win 7 and IE9.
Background:
This deserves an explanation. I use an excel spreadsheet to track a set of data that changes daily. I'm learning HTML and javascript, and I can create a much better (and easier to use) solution as a webpage. I can create the UI / UX, but I'm having a difficult time figuring out how to store the data on the local computer. Any good suggestions?
Attempts:
Unfortunately, it seems localStorage is not an option. I'm attempting to use jStorage, but I've been running into problems there, also. A similar set of problems has been encountered using simpleStorage.
Thank you for considering, please let me know if any more info is needed, or if I need to clarify something.
Addendum:
Localstorage, and other forms of HTML5 storage, do not work. Officially it does, unofficially it is very buggy. See blog post here, and SO answer here. Either way, with the following simple code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Backlog Tracker</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="backlog_localstorage.js"></script>
</head>
<body>
</body>
</html>
and javascript (ref as "backlog_localstorage.js" above):
$(document).ready(function(){
$("body").append("<button>Try It</button>");
$("button").click(function(){
localStorage.setItem("key1", "Hello");
console.log(localStorage.getItem("key1"));
});
});
... I get the following error: "SCRIPT5007: Unable to get value of the property 'setItem': object is null or undefined" on the line localStorage.setItem("key1", "Hello");
HTA (which is really just an html file with one extra tag and a different file extension) is one possible solution for windows users:
Important: Save as demo.hta to run on windows as an app
<!DOCTYPE html>
<html> <!-- some parts lifted from
http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms536473(v=vs.85).aspx
-->
<head>
<title>State Saving Demo</title>
<hta:application id="App"
application="yes"
applicationname="demo"
icon="calc.exe"
border="thin"
caption="yes"
sysmenu="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="no"
maximizeButton="yes"
minimizeButton="yes"
navigable="no"
scroll="yes"
contextmenu="no"
selection="no"
windowstate="normal" >
<!-- Use Internet Explorer 10 Standards mode (to use JSON, CSS3, etc...) -->
<meta http-equiv="x-ua-compatible" content="IE=10">
</head>
<body onload=loadMe() >
<h1 id=h1>Command-line args: </h1>
<h3>Persisted Text</h3>
<textarea rows=20 cols=100 id=mydata onchange=saveMe() >
You can change me and i won't forget!
</textarea>
<script>
document.title+=" - Today is " + Date(); // task/title bar demo
h1.innerHTML+= JSON.stringify( App.commandLine ); // optional invocation info here (much like a real app)
// app-specific custom code:
FILENAME="state.txt";
function saveMe(){save(FILENAME, mydata.value); }
function loadMe(){mydata.value=load(FILENAME) || mydata.value;}
// generic utils:
function load(filename) { //IE FSO file Loader
var file,
text="",
fso= new ActiveXObject('Scripting.FileSystemObject');
try{
file = fso.OpenTextFile(filename, 1, false);
text = file.readAll();
file.Close();
}catch(y){}
return text;
}
function save(filename, sData){ //IE FSO file Saver
var file,
fso = new ActiveXObject('Scripting.FileSystemObject');
file = fso.CreateTextFile(filename, 2, false);
file.write(sData);
file.Close();
return file;
}
</script>
</body>
</html>
I recently re-discovered HTAs, and they are not half bad. I don't think I would want to distribute and maintain them, but HTA's are an easy way to make simple desktop app using HTML, CSS, and JS. Its nice not to have to build anything to "recompile" the app after changes are made. saves a few steps compared to node-webkit, packaged apps, air, cordova, etc, but HTA's have a major downside: they only work on windows afaik...
Looks to me like you can use LocalStorage, the big question is how are you trying to store it? You can easily store an object/array into LocalStorage, and that object/array can be your data, then JS can output this into a table. If you're looking to store actual files then you're looking at something more like an ActiveX plugin.
http://caniuse.com/#search=localstorage
Alternatively if you have internet access through a desktop or a phone you can put this on Google Drive. This would be far easier than reinventing the wheel.
I'm customizing a Refinery CMS instance and creating custom front end pages. I tried to follow the README for Wymeditor, but it seems that the Wymeditor embedded in RefineryCMS has been modified, and this isn't working.
https://github.com/wymeditor/wymeditor
I tried to view the source of a Refinery admin page with the editor, and just copied the Javascript and CSS source tags to include into my front end custom page, and added the class to the text area, and called the wymeditor() function, but it gave a Javascript error.
HTML source...
<link href="/assets/wymeditor/skins/refinery/skin.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/wymeditor/setup.js?body=1" type="text/javascript"></script>
<script src="/assets/wymeditor/functions.js?body=1" type="text/javascript"></script>
...
Yields console error
Uncaught TypeError: Cannot read property 'msie' of undefined boot_wym.js?body=1:117
Try a version of jquery older than 1.9. The .browser method has been removed in 1.9
You can also try this monkey patch of js
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
I added this immediately after the textarea. I wasn't able to get it to work with the JQuery that came with Refinery (even with jquery-migrate), and I wasn't able to get it to work with the Wymeditor that came with Refinery either. I don't believe this is the ideal solution, but it's all I could come up with for now. I'm sure it will break something else, as the console is giving errors like 'Object has no method carousel' now. I don't want to put an old JQuery in the application.js or application.haml layout, so hopefully this will localize breakage. Open to more ideas...
= f.text_area :body, rows: 15, cols: 100, class: 'wymeditor'
<script type="text/javascript" src="/assets/jquery/jquery.js"></script>
<script type="text/javascript" src="/assets/wymeditor/jquery.wymeditor.js"></script>
:javascript
jQuery(function() {
$('.wymeditor').wymeditor();
console.log("initialized .wymeditor: "+$('.wymeditor'));
});