Script works in MSIE but not FireFox (part of a VB.NET 2005 web site)
There must be a place in FireFox or a JavaScript settings somewhere that allows errors to continue.
The below works in MSIE
var _rate = "ctl00$ContentPlaceHolder1$txtrate"+index;
var rate = document.getElementById(_rate).value;
index = 1 to 10 for each row on the page. In this case it is 1 (the first).
But it the FireFox java errors it gets a null and terminates.
Why is it getting a null. It works fine on MSIE.
Jump to PostHi,
try the following pattern below, to strip down element in the page if the
getElementByIdmethod, fails to catch your target object.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
Jump to PostInteresting ...
It works on IE6 supporting javascript up to version 1.3 only!But it fails on FX v3.5.2 supporting javascript 1.5, and reporting to support javascript up to version 1.8.
I am puzzled???(Works in Opera also)...
Jump to PostYou should try to find some replacement for that dollar sign of yours.
Hi,
try the following pattern below, to strip down element in the page if the getElementById method, fails to catch your target object.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Free Live Help!</title>
<script type="text/javascript">
<!--
var checkObj = function( ids ) { // This will check the object availability in your page
var ids = ids || "";
var index = 2;
var _rate = ids + index;
var obj;
if ( obj = document.getElementById( _rate )) {
return obj;
} obj = document.getElementsByTagName("*");
for ( var i = 0; !!( obj[ i ] ); i++ ) {
/*
If the first statement failed to get the target element, then this block will get executed and will force to return the object by evaluating every ids of the elements' in the DOM collection. */
if ( obj[ i ].id.lastIndexOf("txtrate" + index ) !== -1 ) {
return obj[ i ]; }
} alert( "\nobject id: \"" + _rate + "\" is undefined" );
return false;
};
window.onload = function() {
var element = null;
if ( element = checkObj("ctl00$ContentPlaceHolder1$txtrate"))
element.innerText = "This is your target element: " + element.outerHTML // See if target element returned.
else
return false;
};
// JavaScript-1.5 -->
</script>
</head>
<body id="body">
<!-- DUMMIES -->
<div id="ctl00$ContentPlaceHolder1$txtrate1"></div>
<div id="ctl00$ContentPlaceHolder1$txtrate2"></div>
<div id="ctl00$ContentPlaceHolder1$txtrate3"></div>
</body>
</html>hope it helps...
I am having a little problem with this code. But I am not a Java programmer.
First I noticed
for ( var i = 0; !!( obj[ i ] ); i++ ) {
Is the double ! correct? not/not means yes???
Then
if ( obj[ i ].id.lastIndexOf("txtrate" + index ) !== -1 ) {
Is the double = correct? I thought it was just != or perhaps that means the same.
then
Statements like
( "\nobject id: \"" + _rate + "\" is undefined"
I would think the _rate should be ids since the control is changing with each call to checkObj
also
Removed the index = 2 and used ids instead of any other controls.
But I am always getting is undefined. It seems that there is nothing to loop through.
Interesting ...
It works on IE6 supporting javascript up to version 1.3 only!
But it fails on FX v3.5.2 supporting javascript 1.5, and reporting to support javascript up to version 1.8.
I am puzzled???
(Works in Opera also)...
You should try to find some replacement for that dollar sign of yours.
is the double ! correct?
what it does, is that it simply convert's non-boolean object into a boolean object
e.g. !!( obj[ i ] /* if obj[ i ] returns true, then continue incrementing i variable */ ) this expression, is properly interpreted inside OPERA, but i am not sure if this would also be interpreted properly inside other browsers.
And I think you might also want to consider Troy's suggestion on replacing those dollar signs', in your element ids.
But here's another workaround if you can't avoid using it:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
<script type="text/javascript">
<!--
var d = document;
var checkOBJ = function( ids ) {
var obj = null;
var uid = ids;
if ((( obj = d.getElementsByTagName("*")) ? obj : obj = d.all )) {
var ids = ids.replace( /[\W\s]+/ig, "" );
ids = new RegExp( ids );
oLen = obj.length;
for ( var i = 0; i < oLen; i++ ) {
var xid = obj[ i ].getAttribute("id");
if ( xid && ids.test( xid.replace( /[\W\s]+/ig, "" ))) {
var getObj = obj[ i ];
break;
}
} delete oLen;
if ( getObj )
return getObj;
else {
alert( "Object id: " + uid + " is undefined.\nPlease verify your element id." )
return false;
}
} alert( "failed to execute the script!\Please update your browser." );
return false;
};
window.onload = function() {
var pref = "ctl00$ContentPlaceHolder1$txtrate";
// This are the 3 existing element id in the document.
// condition is true:
alert( checkOBJ( pref + 1 ).id );
alert( checkOBJ( pref + 2 ).id );
alert( checkOBJ( pref + 3 ).id );
// non-valid id and does not exist in the document.
// condition is false:
alert( checkOBJ( pref + 4 )); // output : false
};
// -->
</script>
</head>
<body>
<div id="ctl00$ContentPlaceHolder1$txtrate1"></div>
<div></div>
<div id="ctl00$ContentPlaceHolder1$txtrate2"></div>
<div></div>
<div id="ctl00$ContentPlaceHolder1$txtrate3"></div>
<div></div>
</body>
</html>I would like to inform all the viewers' and as well as with all the users' of daniweb, that there's no guarantee, that this code will also work inside your browser, unless if you are using ( Opera7+ browser ).
Script works in MSIE but not FireFox (part of a VB.NET 2005 web site)
There must be a place in FireFox or a JavaScript settings somewhere that allows errors to continue.
The below works in MSIE
var _rate = "ctl00$ContentPlaceHolder1$txtrate"+index;
var rate = document.getElementById(_rate).value;index = 1 to 10 for each row on the page. In this case it is 1 (the first).
But it the FireFox java errors it gets a null and terminates.
Why is it getting a null. It works fine on MSIE.
That's because the element: "ctl00$ContentPlaceHolder1$txtrate"+index; doesn't exist!
The document built-in function [getElementById()] is written to return "null" when element with that id is not found. Therefore, that report should be considered correct.
Here is your working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dollar sign in ID attribute</title>
</head>
<body>
<div>
<input id="ctl00$ContentPlaceHolder1$txtrate1" value="Input 1">
<input id="ctl00$ContentPlaceHolder1$txtrate2" value="Input 2">
<input id="ctl00$ContentPlaceHolder1$txtrate3" value="Input 3">
</div>
<script type="text/javascript">
var index = 1 //to enable test: index value set manually!
var _rate = "ctl00$ContentPlaceHolder1$txtrate" + index;
var rate = document.getElementById(_rate).value;
alert(rate);
</script>
</body>
</html>If you need further explanations ( on "why is it working now?" ), please don't hesitate to ask.
Regards
I do not understand why you say it doesn't exists.
There are 10 txtrate fields, txtrate1 to txtrate10
asp:TextBox ID="txtrate1"....
not html fields.
index is 1 to 10.
Again it works in MSIE but not FireFox.
I also do not see the difference between yours and mine except for the spaces around +
Yours
var _rate = "ctl00$ContentPlaceHolder1$txtrate" + index;
var rate = document.getElementById(_rate).value;
Mine
var _rate = "ctl00$ContentPlaceHolder1$txtrate"+index;
var rate = document.getElementById(_rate).value;
What am I missing?
1. I do not understand why you say it doesn't exists.
2. There are 10 txtrate fields, txtrate1 to txtrate10
asp:TextBox ID="txtrate1"....
not html fields.index is 1 to 10.
3. Again it works in MSIE but not FireFox.
4. I also do not see the difference between yours and mine except for the spaces around +
Yours
var _rate = "ctl00$ContentPlaceHolder1$txtrate" + index;
var rate = document.getElementById(_rate).value;Mine
var _rate = "ctl00$ContentPlaceHolder1$txtrate"+index;
var rate = document.getElementById(_rate).value;5. What am I missing?
:')
Are you putting that script in the document header???
Because if you aren't, you shouldn't read this.
1. getElementById() returning null, always has a meaning that the element of that query is not available.
2. I know there are at least 10 elements you are trying to handle there. It doesn't matter if they are text-box or input fields or divs or whatever for as long as they are available to the script, so the culprit is elsewhere.
3. I've tested the code in IE6, FX, Opera9 & even Flock before posting it , - and it worked as expected in all!
This picture proves that your code in my order is working on FX too! http://i27.tinypic.com/2qnursj.png
Didn't test in Safari though, and I'm sure even with this code order, you will be getting back that "null".
4. In fact, there's nothing wrong with your code at all, they're both exactly the same.
5. Mozillas, Netscape breeds, and especially Safari, will try to compensate their slow engines with running scripts independently from the content flow.
FX, will at least try to synchronize...
So here is what you were missing:
You are putting the script in the document header instead of document body.
General Advice:
SCRIPT tag belongs to the BODY element, and is 100% legitimate only in the document body!
Script tags in the Document Header were/are allowed! (This was accepted thanks to image pre-loading script functions requirement back than). meaning: in the document header - they are allowed - not required!
But Safari will not respect the core cascading logic, even if the script is way at the end of the document-body. Therefore, regardless if the element you are trying to manipulate is the very first element in the document body - trying to get it by its ID - will most probably return "null".
Revealing that: generation 5 Netscape brood propaganda, that global vars are "evil" is in fact their own evil lie to compensate for their cheat.
For example in Safari
var dS = document.styleSheets
alert(dS.length)will always return 0 (zero), no matter how many styles you've linked or written in that document, and no matter if this script-line resides at the very bottom of your document-body.
But in contrast, with this condition fulfilled FX will play nice.
My personal advice:
Always try to avoid putting scripts that manipulate DOM in the document header. Especially the ones that are not "packed' in a function and triggered explicitly by "onload" event of the document.
Sorry for my long reply.
Regards.
Now sorry for asking but did my suggestion for putting your script in the body of the document solve your problem with FX and other Netscape breeds, or not?
I gave the project to another developer we have and he 'fixed' it. Not sure how.
I will ask and reply if he took your suggestion.
Sorry you lost it, ...
I know, it will work.
It is the readers with the same problem who will not!
The returned 'null' tell's you that the DOM is not ready during the script execution. But anyway that page will not validate while that dollar sign is still present on those element IDs.
He changed the $ to _ as you requested above.
I did not loose it. I hired another developer. My expertise is QuickBooks. The first developer who was working on it dissappeared so I was forced to make it work.
I guess that I still don't understand why the $ worked in MSIE but not FireFox but that is behind me now. Does FF consider the $ as a variable name or something?
Thanks Again
Jack
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.