JavaScript onChange handler bug - javascript

I have a onChange handler bug on my production env.
I have a selectbox as follow:
<select name="select-history-one" id="select_old_version" class="form-control" onchange="showHistoryDiff();"> ... </select>
Below (inside the body tag) I have the function declared in a script tag as follow:
<script>
function showHistoryDiff(){
...
}
</script>
On my local machine in debug mode everything works just fine. As soon as I deploy it onto my webserver and try to select something I get that error message:
Uncaught ReferenceError: showHistoryDiff is not defined
at HTMLSelectElement.onchange (27:632)
onchange # 27:632
I really have no clue why that happens.

<body>
<select onchange="doChange()">
<option>A</option>
<option>B</option>
</select>
<script>
function doChange() {
console.log('hi');
}
</script>
</body>
As you can see from this example, it should work as you described.
That likely means it isn't really an issue with the code, but more an issue with how it is loaded.
The first is to make sure that your function is actually there. How you've described it, you should be able to open up the console in Chrome and just type showHistoryDiff and it should output something like this:
ƒ showHistoryDiff() { console.log('hi'); }
If it doesn't say this, but instead says it is undefined, then for whatever reason your code isn't getting built. If that's the case, you'll want to take a very close look at your build pipeline and/or setup to make sure it's actually going where you think it should.
If it does exist, then there are a couple of possibilities:
- it is getting overridden by something else and becoming undefined. Look for any other references to the function name throughout your code
- there is some other JavaScript syntax error which is happening before your function is declared, so the function doesn't end up declared
One other remote possibility is if you are loading the code from two different domains, you might be running into cross-origin (CORS) issues.
Look at your console and see if there are any errors being spit out. Clearing those up should be your first goal.

Related

Kony Reference Error :- Can't find variable: testCall

In my code i have a simple drop down, on select of which i am calling a function called testCall() , But for some reason i am seeing a reference error :- cant find variable: testCall , Can any one please help
code below
function testCall(){
//print statements
//kony.print("test");
}
screen shots
if there is any error in your function of the entire js file, such errors appear, in my case i had a single equals in a if condition which was the issue.
it seems like your .js (module) contains some java-script error (most probably syntax error). Better you can copy all the java-script code and put it in chrome console it will show you the syntax error.

ReferenceError in JavaScript

I've got a problem with my web application. Firebug console gives me a "ReferenceError" that nearly every function is not found. I don't really know. I didn't even change stuff in some of the functions.
A snippet of my code:
<body>
...
<tr id="08">
<td>08:00</td>
<td id="mo08" onclick="go(this)"> </td>
....
</body>
Neither the onclick functions work nor the <body onload=function()> works.
I've tried to put the script into the header, but it ain't working, neither beneath the body.
function go(element) {
var ident = element.id;
windowOpener("SomePage.jsp?i="+ident);
checkDataBase();
}
There could be any error in your file of javascript before this function i.e.
if functions are written in following order like
function foo1() {} /* If it contains error then
functions below it will not be able to recognised by compiler */
function foo2() {}
function go() {}
so check for error before go() defination
I have solved my issue now. The Problem were my tries to connect to my mysql server and get some data from it. After i deleted it out, everything worked fine for me.
The Error occured in Line 1 Column 1, so i didn't have any clues, where to find my error.
I Thank you all for your Time and Effort.

Closure - library not loading properly

I've got a Closure environment running fine in my development environment. In a new folder & file, however, it is not working.
For example, take this test script:
goog.require('goog.dom');
console.log(goog);
console.log(goog.dom);
goog.dom.getElement('logout').innerHTML = "Heck";
That's all, plus the base.js in the HTML.
The first console.log shows an object with all the right stuff is in there. All the files are loaded into the DOM too.
The second console log, however, says undefined and so the last line doesn't work (obviously). The Chrome console error is Uncaught TypeError: Cannot call method 'getElement' of undefined.
What the heck is going on? It's the same if I try XhrIo. It's not finding the methods on the goog object.
Thanks.
Documentation:
Note: Do not put your goog.require() statements in the same script tag
as the entry point to code that uses the goog.required functions or
classes. A goog.require() call adds code to the document after the
script tag containing the call.
So
<script>
goog.require('goog.dom');
console.log(goog.dom);
</script>
prints undefined. But
<script>
goog.require('goog.dom');
</script>
<script>
console.log(goog.dom);
</script>
or
<script>
goog.require('goog.dom');
addEventListener('load', function() {
console.log(goog.dom);
});
</script>
prints an Object.
FYI, there are other possible workflows. For example, the closurebuilder.py script can help to load all the required files ahead of time.

Chrome Native Client, errors using onKeyDown event

I'm trying to get a very basic Chrome Native Client application running. What I'd like to do is respond to keystrokes, for example by displaying "You pressed X" whenever a user presses a key. I've been at it all day, but every time I press a key, I get "Uncaught TypeError: Object # has no method 'postMessage'".
The errors are all in the Javascript; the Native Client C++ module works fine.
Javascript in head of document:
myModule = null; // Global application object.
function moduleDidLoad() {
myModule = document.getElementById('mymodule');
alert("module loaded!") // this works
myModule.postMessage('hello'); // this works, and posts 'hello' to the module
// ERROR
document.body.onkeydown = function() {myModule.postMessage('hi');}
}
In page:
<div id="listener">
<script type="text/javascript">
var listener = document.getElementById('listener');
listener.addEventListener('load', moduleDidLoad, true);
</script>
<embed name="nacl_module"
id="mymodule"
width=0 height=0
src="mymodule.nmf"
type="application/x-nacl" />
</div>
I've tried it about 15 different ways: by adding it to the body tag with addEventListener, by adding it directly to the body tag with onKeyDown... nothing works.
I have experience with C/C++ and PHP but my Javascript is really weak. I think I must be missing something fundamental and obvious.
Solved. Elsewhere on the page, the DIV that contains the game module was having its contents changed, which removed the module from memory.

"Stack overflow in line 0" on Internet Explorer

I realise this is not the ideal place to ask about this in terms of searchability, but I've got a page whose JavaScript code throws "Stack overflow in line 0" errors when I look at it in Internet Explorer.
The problem is quite clearly not in line 0, but somewhere in the list of stuff that I'm writing to the document. Everything works fine in Firefox, so I don't have the delights of Firebug and friends to assist in troubleshooting.
Are there any standard causes for this? I'm guessing this is probably an Internet Explorer 7 bug or something quite obscure, and my Google-fu is bringing me little joy currently. I can find lots of people who have run into this before, but I can't seem to find how they solved it.
I ran into this problem recently and wrote up a post about the particular case in our code that was causing this problem.
http://cappuccino.org/discuss/2010/03/01/internet-explorer-global-variables-and-stack-overflows/
The quick summary is: recursion that passes through the host global object is limited to a stack depth of 13. In other words, if the reference your function call is using (not necessarily the function itself) was defined with some form window.foo = function, then recursing through foo is limited to a depth of 13.
Aha!
I had an OnError() event in some code that was setting the image source to a default image path if it wasn't found. Of course, if the default image path wasn't found it would trigger the error handler...
For people who have a similar problem but not the same, I guess the cause of this is most likely to be either an unterminated loop, an event handler that triggers itself or something similar that throws the JavaScript engine into a spin.
You can turn off the "Disable Script Debugging" option inside of Internet Explorer and start debugging with Visual Studio if you happen to have that around.
I've found that it is one of few ways to diagnose some of those IE specific issues.
I had this problem, and I solved it. There was an attribute in the <%# Page tag named MaintainScrollPositionOnPostback and after removing it, the error disapeared.
I added it before to prevent scrolling after each postback.
If you came here because you had the problem inside your selenium tests:
IE doesn't like By.id("xyz"). Use By.name, xpath, or whatever instead.
Also having smartNavigation="true" causes this"
I set up a default project and found out the following:
The problem is the combination of smartNavigation and maintainScrollPositionOnPostBack. The error only occurs when both are set to true.
In my case, the error was produced by:
<pages smartNavigation="true" maintainScrollPositionOnPostBack="true" />
Any other combination works fine.
Can anybody confirm this?
Internet Options
Tools
Internet options
Advanced
Navigation section
Click > Disable script debugging
display a notification about every script error
sign in
You will smile !
My was "at line 1" instead but...
I got this problem when using jQuery's .clone method. I replaced these by using making jQuery objects from the html string: $($(selector).html()).
I have reproduced the same error on IE8. One of the text boxes has some event handlers to replace not valid data.
$('.numbersonly').on("keyup input propertychange", function () {
//code
});
The error message was shown on entering data to this text box. We removed event "propertychange" from the code above and now it works correctly.
P.S. maybe it will help somebody
I don't know what to tell you, but the same problem occured with jQuery table sorting and SEARCH.
When there is nothing left in the table, where you are searching a string for example, you get this error too. Even in Google Analytics this error occurs often.
In my case I had two functions a() and b(). First was calling second and second was calling first one:
var i = 0;
function a() { b(); }
function b() {
i++;
if (i < 30) {
a();
}
}
a();
I resolved this using setTimeout:
var i = 0;
function a() { b(); }
function b() {
i++;
if (i < 30) {
setTimeout( function() {
a();
}, 0);
}
}
a();
This is problem with Java and Flash Player. Install the latest Java and Flash Player, and the problem will be resolved. If not, then install Mozilla Firefox, it will auto install the updates required.

Categories