DOM compatibility with Macs?

[Spudhead]

Hey,

Not sure if this should go in the DOM forum, apologies if so.

Having problems with.. well, a couple of functions - everything works fine on Windows machines but Macs sit there and stubbornly refuse to comply.

This is for our company intranet, where we add new jobs. A job can contain a number of quote details, which are presented in a table; each quote detail has a category (select box), description (textarea) and cost (text input). You can add as many quote details as you want - just hit the button that says "add entry".

That button fires a function that - should - add a new row to the table, with new boxes for the category, description and cost.


function addrow(){
if (eval("document.form1.tex"+i+".value==\"\";")){
alert("Please fill in previous paragraph.");
}
else{
sNode="T"+1;
curNode=document.getElementById(sNode);
nPar="";
for (j=1; j<=i+1; j++){
if (j<=i){
eval("a=document.form1.tex"+j+".value;");
eval("b=document.form1.cos"+j+".value;");
eval("c=document.form1.sel"+j+".options[document.form1.sel"+j+".selectedIndex].value;");
p="";
w="";
m="";
d="";
if(c=="Print"){p=" SELECTED";}
if(c=="Web"){w=" SELECTED";}
if(c=="Multimedia"){m=" SELECTED";}
if(c=="Design"){d=" SELECTED";}
nPar+='<tr id="A'+j+'"><td width="100%" valign="top"><font face="Arial, Helvetica" size="2" color="#000000">Category:<br><select name="sel'+j+'"><option value="Print"'+p+'>Print</option><option value="Web"'+w+'>Web</option><option value="Multimedia"'+m+'>Multimedia</option><option value="Design"'+d+'>Design</option></select></font></td><td width="100%" valign="top"><font face="Arial, Helvetica" size="2" color="#000000">Description:<br><textarea name="tex'+j+'" cols="35" rows="5">'+a+'</textarea></font></td><td width="100%" valign="top"><font face="Arial, Helvetica" size="2" color="#000000">Cost:<br>£<input type="text" name="cos'+j+'" value="'+b+'"></font></td></tr>';
}
else{
a="";
b=0;
nPar+='<tr id="A'+j+'"><td width="100%" valign="top"><font face="Arial, Helvetica" size="2" color="#000000">Category:<br><select name="sel'+j+'"><option value="Print">Print</option><option value="Web">Web</option><option value="Multimedia">Multimedia</option><option value="Design">Design</option></select></font></td><td width="100%" valign="top"><font face="Arial, Helvetica" size="2" color="#000000">Description:<br><textarea name="tex'+j+'" cols="35" rows="5">'+a+'</textarea></font></td><td width="100%" valign="top"><font face="Arial, Helvetica" size="2" color="#000000">Cost:<br>£<input type="text" name="cos'+j+'" value="'+b+'"></font></td></tr>';
}
}
nDel='&nbsp;<input type="button" value="delete entry" onclick="javascript:delrow();">';
nNode=document.createElement("<table>");
curNode.replaceNode(nNode);
nNode.outerHTML='<table id="T1" width="100%" border="0">'+nPar+'<tr><td width="100%" colspan=3><font face="Arial, Helvetica" size="2"><input type="button" value="add entry" onclick="javascript:addrow();">'+nDel+'</font></td></tr>'+'</table>';
i++;
sumQuote();
}
}


This, apart from popping up an alert if you haven't filled in the previous "description" box, doesn't do anything on a Mac (IE 5.1) and I'm not sure why. I can only think that stuff like "createElement" and "replaceNode" aren't supported, but MSDN seems to suggest that they are?

Any suggestions appreciated.

NB - the variable "i" above is set initially by the server-side script that grabs the existing quote details from the database, and is always equal to the total number of quote detail entries, and hence rows in the table.

[beetle]

Well, contrary to MSDN, this page (http://www.xs4all.net/~ppk/js/index.html?/~ppk/js/version5.html) says that IE5 Mac does NOT support replaceNode. So you will have to prototype it or use something else.

Check the rest of your DOM methods with that link. From what I can tell, the guy hand tested all that stuff, so it should be pretty accurate. It has become one of my favorite refereces :D

MSDN has like 400,000 pages. I guess you can't blame them for a few errors, eh?

[glenngv]

This is off topic, but it would certainly help in your coding practice :)

As much as possible, don't use eval()
The code looks difficult to read.
If you have form elements that follow some naming convention,
you can use the form's elements array to reference each of them.
See the codes below:

if (document.form1.elements["tex"+i].value==""){
alert("Please fill in previous paragraph.");
}

a=document.form1.elements["tex"+j].value;
b=document.form1.elements["cos"+j].value;
c=document.form1.elements["sel"+j].options[document.form1.elements["sel"+j].selectedIndex].value";

and to optimize the code further, you can set the form object to a variable:
var frm = document.form1;

then reference it like this:
a=frm.elements["tex"+j].value;

or better, since you call addrow() in the button, you can put the form object handle as the parameter
simply by using the form control's form property that references which form the control is in:

<input type="button" value="add entry" onclick="addrow(this.form);">

then in the function:

function addrow(frm){
if (frm.elements["tex"+i].value==""){
alert("Please fill in previous paragraph.");
}
...
a=frm.elements["tex"+j].value;
b=frm.elements["cos"+j].value;
c=frm.elements["sel"+j].options[frm.elements["sel"+j].selectedIndex].value";
...
}