So this is a part of a simple JavaScript code to handle xmlhttprequest. The part that is generating the error is at the bottom (else if):
httpReq.onreadystatechange = function(){
if (httpReq.readyState == 4) {
if (httpReq.status == 200) {
var strRes = httpReq.responseText;
if(xmlOrig) strRes = (new $Xml(strRes, true)).conteudo(xmlOrig);
if(elemDest) $id(elemDest).innerHTML = strRes;
if(func) {
var dadosArray = new Array(4, strRes, httpReq, 'OK', 'Concluído com sucesso.');
window[func](dadosArray);
}
} else {
if(elemDest) elemDest.innerHTML = 'Erro: '+httpReq.status+' | '+httpReq.statusText;
if(func) {
var dadosArray = new Array(4, false, httpReq, 'erro', 'Erro, conteúdo não carregado!');
window[func](dadosArray);
}
}
} else if(func){
console.log("func? "+typeof(func));
var dadosArray = new Array(httpReq.readyState);
window[func](dadosArray); // <-- HERE IS THE ERROR!
}
}
However, the console.log return the "func" argument as a function, so where is the error?
The Safari console:
func? function
TypeError: 'undefined' is not a function (evaluating 'windowfunc')
Are you sure func is on the window? You are checking for func, which could be inside any scope, and thne you can calling window.func().
You probably meant to do window["func"] instead of window[func].
The latter expression is equivalent to window["function(someParam) { ... }"] (i.e., a whatever the content of func actually is). window probably does not have a property whose name is the entire stringified text content of func.
Related
I have a WebForms page which is including MicrosoftAjax.debug.js (4.1.7.123) as a script resource:
// Name: MicrosoftAjax.debug.js
// Assembly: AjaxControlToolkit
// Version: 4.1.7.123
// FileVersion: 4.1.7.0123
// (c) 2010 CodePlex Foundation
On load this script self invokes, eventually calling this function:
var attachEvent = !!document.attachEvent;
...
function listenOnce(target, name, ieName, callback, isReadyState, isScript) {
function onEvent() {
if (!attachEvent || !isReadyState || /loaded|complete/.test(target.readyState)) {
if (attachEvent) {
target.detachEvent(ieName || ("on" + name), onEvent);
}
else {
target.removeEventListener(name, onEvent, false);
if (isScript) {
target.removeEventListener("error", onEvent, false);
}
}
callback.apply(target);
target = null;
}
}
if (attachEvent) {
target.attachEvent(ieName || ("on" + name), onEvent);
}
else {
if (target.addEventListener) {
target.addEventListener(name, onEvent, false);
}
if (isScript) {
target.addEventListener("error", onEvent, false);
}
}
}
The problem is that in Chrome I'm getting the following Javascript error:
Uncaught TypeError: Object [object global] has no method 'attachEvent'
On the following line:
target.attachEvent(ieName || ("on" + name), onEvent);
Attaching the debugger, target is the window object, which as you'd expect does not have the attachEvent() method in Chrome.
document.attachEvent() is the following function:
function (sType, fHandler) {
var shortTypeName = sType.replace(/on/, "");
fHandler._ieEmuEventHandler = function (e) {
window.event = e;
return fHandler();
};
this.addEventListener(shortTypeName, fHandler._ieEmuEventHandler, false);
}
Is this a bug in the Microsoft Ajax script? Chrome? Or is it being caused by some condition on the page?
Either way, how can I resolve it?
You shouldn't reassign document.attachEvent to begin with, so you may want to get rid of that. attachEvent is true because of that. That doesn't mean that target.attachEvent exists, though. It seems like you should check if (!!target.attachEvent) before calling it on target instead of just looking at your attachEvent variable.
I'll leave this question up in case anyone else runs into the same problem. However the error was being caused by a legacy Javascript library reassigning the document.attachEvent() method.
This was the offending code:
function emulateAttachEvent() {
HTMLDocument.prototype.attachEvent =
HTMLElement.prototype.attachEvent = function (sType, fHandler) {
var shortTypeName = sType.replace(/on/, "");
fHandler._ieEmuEventHandler = function (e) {
window.event = e;
return fHandler();
};
this.addEventListener(shortTypeName, fHandler._ieEmuEventHandler, false);
};
HTMLDocument.prototype.detachEvent =
HTMLElement.prototype.detachEvent = function (sType, fHandler) {
var shortTypeName = sType.replace(/on/, "");
if (typeof fHandler._ieEmuEventHandler == "function")
this.removeEventListener(shortTypeName, fHandler._ieEmuEventHandler, false);
else
this.removeEventListener(shortTypeName, fHandler, true);
};
}
Fortunately, I was able to remove the legacy library. However this won't help if you have a genuine case for reassigning the document.attachEvent() method, in which case you will need to come up with an alternative solution.
I'm using a run-time assignment of functions to account for browser differences. However for un-supported browsers, I want to return an empty function so that a JavaScript error is not thrown.
But, jslint complains about empty functions. What is the jslint happy way to do this?
Empty block.
$R.functionNull = function () {
// events not supported;
};
$R.Constructor.prototype.createEvent = (function () {
if (doc.createEvent) {
return function (type) {
var event = doc.createEvent("HTMLEvents");
event.initEvent(type, true, false);
$NS.eachKey(this, function (val) {
val.dispatchEvent(event);
});
};
}
if (doc.createEventObject) {
return function (type) {
var event = doc.createEventObject();
event.eventType = type;
$NS.eachKey(this, function (val) {
val.fireEvent('on' + type, event);
});
};
}
return $R.functionNull;
}());
You can add a body to your function and have it return undefined:
$R.functionNull = function() {
// Events not supported.
return undefined;
};
This keeps the same semantics as a "truly empty" function, and should satisfy JSLint.
Use the lambda expression:
$R.functionNull = () => void 0;
For me this works best:
emptyFunction = Function();
console.log(emptyFunction); // logs 'ƒ anonymous() {}'
console.log(emptyFunction()); // logs 'undefined'
It's so short that I wouldn't even assign it to a variable (of course you can also use a constant-like variable "EF" or so, that's even shorter and doesn't need the additioal "()" brackets). Just use "Function()" anywhere you need a truly empty function, that doesn't even have a name, not even when you assign it to a variable, and that's the small behaviour difference between my solution and Frédéric's:
// --- Frédéric ---
emptyFunction = function() {
return undefined;
}
console.log(emptyFunction.name); // logs '"emptyFunction"'
// --- me ---
emptyFunction = Function();
console.log(emptyFunction.name); // logs '""' (or '"anonymous"' in chrome, to be fair)
What about returning
return () => undefined;
instead of
return $R.functionNull;
I get an error passing back an object from function to calling function.
What am I doing wrong?
function stStartProcessing()
{
var returnValue = {};
returnValue = srGetNextRecord(); // returnValue is undefined
}
function srGetNextRecord()
{
var returnValue = {};
returnValue.addressToArray = "AAA";
returnValue.sequence = "111";
console.log(returnValue); // this works
return returnValue;
}
There must be a different problem in your code, since what you posted works fine.
The modified code below shows 111. See this DEMO
function stStartProcessing()
{
var returnValue = {};
returnValue = srGetNextRecord(); // returnValue is undefined -- no, it's not
console.log(returnValue.sequence); //shows 111
}
function srGetNextRecord()
{
var returnValue = {};
returnValue.addressToArray = "AAA";
returnValue.sequence = "111";
console.log(returnValue); // this works
return returnValue;
}
stStartProcessing();
On a separate note, when writing JavaScript, please get into the habit of putting your opening braces on the same line—always. For what you have above it won't make a difference, but if you ever do this:
function foo()
{
return
{
x: 1,
y: 2
};
}
horrible things will happen—a semicolon will be inserted after the word return, thereby killing your return value, and causing a script error.
This is my code:
request_xml: function()
{
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
if (!http_request)
{
return false;
}
http_request.onreadystatechange = this.response_xml;
http_request.open('GET', realXmlUrl, true);
http_request.send(null);
xmlDoc = http_request.responseXML;
},
response_xml:function ()
{
if (http_request.readyState == 4)
{
if(http_request.status == 404 && countXmlUrl<=3)
{
countXmlUrl++;
realXmlUrl = xmlUrl[countXmlUrl];
this.request_xml();
}
if (http_request.status == 200)
{
xmlDoc = http_request.responseXML;
alert("need to update3");
this.peter_save_data();
}
}
},
peter_save_data:function()
{
// removed function code
},
Strangely, the alert fires without a problem but the function call underneath gives me this error:
Error: this.peter_save_data is not a function
Calling the same damn function from another function elsewhere works fine.
You could do this, right before you call the XML generation.
var that = this;
and later...
that.peter_save_data();
Because this frequently changes when changing scope by using a new function, you can't access the original value by using it. Aliasing it to that allows you still to access the original value of this.
One important piece of the puzzle that is missing is how response_xml is being called. This is important, because it will change what this is (see Jared's comment).
Remember that this can be thought of as (roughly) "the receiver of the method call". If response_xml is passed directly to use as a callback then of course it won't work -- this will likely be window.
Consider these:
var x = {f: function () { return this }}
var g = x.f
x.f() === x // true
g() === x // false
g() === window // true
Happy coding.
The "fix" is likely just to change how response_xml is being called. There are numerous ways to do this (generally with a closure).
Examples:
// Use a closure to keep he object upon which to explicitly invoke the method
// inside response_xml "this" will be "that",
// which was "this" of the current scope
http_request.onreadystatechange = (function (that) {
return function () { return that.response_xml() }
}(this)
// Or, alternatively,
// capture the current "this" as a closed-over variable...
// (assumes this is in a function: var in global context does not create a lexical)
var self = this
http_request.onreadystatechange = function () {
// ...and invoke the method upon it
return self.response_xml()
}
Personally, I would just use jQuery or similar ;-)
If you want a class-like behavior, use the right syntax, The libraries that use that, are using JSON to pass a parameter to a function that makes a class out of it.
function MyClass(CTOR paarams){
var response_xml=function ()
{
if (http_request.readyState == 4)
{
if(http_request.status == 404 && countXmlUrl<=3)
{
countXmlUrl++;
realXmlUrl = xmlUrl[countXmlUrl];
this.request_xml();
}
if (http_request.status == 200)
{
xmlDoc = http_request.responseXML;
alert("need to update3");
this.peter_save_data();
}
}
}
var peter_save_data=function()
{
// removed function code
}
}
var Test = new MyClass(somthing,another_something);
Test.response_xml();
//etc etc.
Or, use the libraries like Mootools where you can do it as JSON:
var T = new Class({
response_xml:function ()
{
if (http_request.readyState == 4)
{
if(http_request.status == 404 && countXmlUrl<=3)
{
countXmlUrl++;
realXmlUrl = xmlUrl[countXmlUrl];
this.request_xml();
}
if (http_request.status == 200)
{
xmlDoc = http_request.responseXML;
alert("need to update3");
this.peter_save_data();
}
}
},
peter_save_data:function()
{
// removed function code
}
});
var X = new T();//etc etc
Here is the line which is causing null or not an object error
if(frm.elements["hdn_retain"+indexval].value==""){
....
} else {
....
}
frm.elements["hdn_retain"+indexval] may be a null object. So, it will have error when getting the value. You can check the frm.elements["hdn_retain"+indexval] if it is null first.
if(frm.elements["hdn_retain"+indexval] != null && frm.elements["hdn_retain"+indexval].value=="")
Either frm or frm.elements["hdn_retain"+indexval] isn't a valid object (doesn't exist in the dom) and therefore you can't access it's property.
you could try something like:
if(frm.elements["hdn_retain"+indexval] && frm.elements["hdn_retain"+indexval].value==""){
Following is the result of alert statement:
alert("frm:::"+frm);
alert("frm elements::::"+frm.elements);
alert("frm hdn_retain :: "+frm.elements["hdn_retain"+indexval]);
frm:::[object]
frm elements::::[object]
frm hdn_retain :: undefined
you can use this utility method getProperty i always use to make sure i get a nested namespace back without worrying about whether or not something is defined:
function getProperty(ns, obj) {
var nsArray = ns.split('.'),
i = 0,
nsLen = nsArray.length;
while (nsLen > 0) {
var newNs = nsArray.shift();
if (obj[newNs]) {
obj = obj[newNs];
} else {
return false;
}
nsLen = nsArray.length;
}
return obj;
};
var index = "hdn_retain" + indexval;
// the following `value` will come back as a valid object/value or a false
value = getProperty('elements.' + index + '.value', frm);
if (value) {
// do whatever
} else {
// do not whatever
}
this can be applied not only to this situation but to any other situation you need to make sure a certain namespace is available before usage.