Shown below is the sample prototype code I am working on. In addition
to the problems already mentioned, there are also inconsistencies in
toggling the visibiliy of the "Insert", "Update", and "Delete"
buttons. (Things work correctly in Netscape 7.1 and not in Internet
Explorer 6.0. Note that the visibility settings on the SIDSelect and
PIDSelect selection items work correctly in BOTH browsers.)
Thanks for your help!
Dave Eland
da******@oru.ed u
<html>
<head>
<script LANGUAGE="JavaS cript">
var needsubmit,edit num;
function LTrim(strValue)
{
var LTRIMrgExp = /^\s */;
return strValue.replac e(LTRIMrgExp,'' );
}
function RTrim(strValue)
{
var RTRIMrgExp = /\s *$/;
return strValue.replac e(RTRIMrgExp,'' );
}
function Trim(strValue)
{
return LTrim(RTrim(str Value));
}
function setstatus(item, value)
{
document.getEle mentById(item). setAttribute("S TATUS",value);
}
function getstatus(item)
{
return(document .getElementById (item).getAttri bute("STATUS")) ;
}
function setvisible(item )
{
var v;
if (getstatus(item ) == "Show") v = "visible"; else v = "hidden";
document.getEle mentById(item). style.visibilit y = v;
}
function setallvisible()
{
setvisible("SID Select");
setvisible("PID Select");
setvisible("Ins ert");
setvisible("Upd ate");
setvisible("Del ete");
}
function hadchange(item)
{
setstatus("Inse rt","Show"); /**/
setstatus("Upda te","Show"); /**/
setstatus("Dele te","Show"); /**/
setallvisible()
}
function addrow()
// add new blank row at end of table
{
var n,v,tbl,tblbody ,tblrow,tbldata ,item,textitem, rowlist;
tbl = document.getEle mentById("tbl2" );
tblbody = tbl.getElements ByTagName("tbod y").item(0);
rowlist = tbl.getElements ByTagName("tr") ;
n = rowlist.length;
tblrow = document.create Element("TR");
tbldata = document.create Element("TD");
item = document.create Element("INPUT" );
item.setAttribu te("type","HIDD EN");
item.setAttribu te("name","PID" );
item.setAttribu te("value"," ");
tbldata.appendC hild(item);
item = document.create Element("INPUT" );
item.setAttribu te("type","TEXT ");
item.setAttribu te("name","PNAM E");
item.setAttribu te("value"," ");
item.setAttribu te("size",15);
item.setAttribu te("readonly",t rue);
tbldata.appendC hild(item);
tblrow.appendCh ild(tbldata);
tbldata = document.create Element("TD");
item = document.create Element("BUTTON ");
v = 'doaction("Edit ",' + n +')';
item.setAttribu te("name","Edit ");
item.setAttribu te("onclick",v) ;
textitem = document.create TextNode("Edit" );
item.appendChil d(textitem);
tbldata.appendC hild(item);
tblrow.appendCh ild(tbldata);
tblbody.appendC hild(tblrow);
}
function delrow(rownum)
// delete row if not at end of list
{
var i,v,tbl,tblbody ,rowlist,button list;
tbl = document.getEle mentById("tbl2" );
tblbody = tbl.getElements ByTagName("tbod y").item(0);
rowlist = tbl.getElements ByTagName("tr") ;
if (rownum < rowlist.length - 1)
{
tblbody.removeC hild(rowlist[rownum]);
buttonlist = document.getEle mentsByName("Ed it");
for (i = 0; i < buttonlist.leng th; i++)
{
v = 'doaction("Edit ",' + i + ')';
buttonlist[i].setAttribute(" onClick",v);
}
}
}
function doaction(curact ion,num)
{
var i;
var selecteditem,pi d,pname,pidlist ,pnamelist;
document.thisFo rm.ACTION.value = curaction;
if (curaction == "SetScreen" )
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "First")
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "Prev")
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "Next")
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "Last")
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "Jump")
{
var SIDSelect;
SIDSelect = document.getEle mentById("SIDSe lect");
if (SIDSelect.styl e.visibility == "hidden")
setstatus("SIDS elect","Show");
else
setstatus("SIDS elect","Hide");
SIDSelect.selec tedIndex = -1;
setallvisible() ;
needsubmit = false;
}
if (curaction == "Edit")
{
var PIDSelect;
editnum = num;
PIDSelect = document.getEle mentById("PIDSe lect");
if (PIDSelect.styl e.visibility == "hidden")
setstatus("PIDS elect","Show");
else
setstatus("PIDS elect","Hide");
needsubmit = false;
PIDSelect.selec tedIndex = -1;
setallvisible() ;
}
if (curaction == "SelectSID" )
{
if (document.thisF orm.SIDSelect.v alue == "Cancel")
{
needsubmit = false;
}
else
{
needsubmit = true;
document.thisFo rm.submit();
}
setstatus("SIDS elect","Hide");
setallvisible() ;
}
if (curaction == "SelectPID" )
{
if (document.thisF orm.PIDSelect.v alue != "Cancel")
{
selecteditem =
Trim(document.g etElementById(" PIDSelect").val ue);
i = selecteditem.in dexOf(" ");
pid = Trim(selectedit em.substring(0, i));
pname = Trim(selectedit em.substring(i) );
pidlist = document.getEle mentsByName("PI D");
pidlist[editnum].value = pid;
pnamelist = document.getEle mentsByName("PN AME");
pnamelist[editnum].value = pname;
if (pid == "" && editnum < pidlist.length-1)
{
delrow(editnum) ;
}
if (pid != "" && editnum == pidlist.length-1)
{
addrow();
}
setstatus("Upda te","Show");
}
needsubmit = false;
setstatus("PIDS elect","Hide");
setallvisible() ;
}
if (curaction == "Insert")
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "Update")
{
needsubmit = true;
document.thisFo rm.submit();
}
if (curaction == "Delete")
{
needsubmit = true;
document.thisFo rm.submit();
}
}
function wantsubmit()
{
return(needsubm it);
}
function initialize()
{
editnum = 0;
needsubmit = true;
setstatus("Inse rt","Hide");
setstatus("Upda te","Hide");
setstatus("Dele te","Hide");
setallvisible() ;
}
</script>
<title>Supplier s info</title>
</head>
<body onLoad='initial ize()'>
<FORM NAME=thisForm ACTION="showpar m.cgi" METHOD="POST"
onSubmit='retur n wantsubmit()'>
<TABLE ID="tbl0" BORDER="1">
<TR>
<TD>
<SELECT NAME="SCREEN" onChange='doact ion("SetScreen" ,0)'>
<OPTION SELECTED> Suppliers
<OPTION> Parts
</SELECT>
<INPUT TYPE="HIDDEN" NAME="ACTION" VALUE="UNKNOWN" >
<BR><BR>
<BUTTON ID="First" STATUS="Show"
onClick='doacti on("First",0)'> First</BUTTON>
<BUTTON ID="Prev" STATUS="Show"
onClick='doacti on("Prev",0)'>P rev</BUTTON>
<BUTTON ID="Next" STATUS="Show"
onClick='doacti on("Next",0)'>N ext</BUTTON>
<BUTTON ID="Last" STATUS="Show"
onClick='doacti on("Last",0)'>L ast</BUTTON>
<BUTTON ID="Jump" STATUS="Show"
onClick='doacti on("Jump",0)'>J ump</BUTTON>
<BR><BR> Supplier
<INPUT TYPE="HIDDEN" NAME="SID" VALUE="1">
<BR>
<TABLE ID="tbl1" BORDER="1">
<TR>
<TD>SNAME</TD>
<TD>
<INPUT TYPE="TEXT" NAME="SNAME" VALUE="Jones" SIZE=15
onChange='hadch ange()'>
</TD>
</TR>
<TR>
<TD>CITY</TD>
<TD>
<INPUT TYPE="TEXT" NAME="CITY" VALUE="Tulsa" SIZE=15
onChange='hadch ange()'>
</TD>
</TR>
</TABLE>
<BR> Parts
<BR>
<TABLE ID="tbl2" BORDER="1">
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="1">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Bolt" SIZE=15 READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doacti on("Edit",0)'>E dit</BUTTON>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="3">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Washer" SIZE=15
READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doacti on("Edit",1)'>E dit</BUTTON>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="4">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Screw" SIZE=15
READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doacti on("Edit",2)'>E dit</BUTTON>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE=" ">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE=" " SIZE=15 READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doacti on("Edit",3)'>E dit</BUTTON>
</TD>
</TR>
</TABLE>
<BR>
<BUTTON ID="Insert" STATUS="Hide"
onClick='doacti on("Insert",0)' >Insert</BUTTON>
<BUTTON ID="Update" STATUS="Hide"
onClick='doacti on("Update",0)' >Update</BUTTON>
<BUTTON ID="Delete" STATUS="Hide"
onClick='doacti on("Delete",0)' >Delete</BUTTON>
</TD>
<TD>
<SELECT ID="SIDSelect" NAME="SIDSelect " SIZE=20 STATUS="Hide"
onChange='doact ion("SelectSID" ,0)'>
<OPTION VALUE="Cancel"> Cancel</OPTION>
<OPTION VALUE="1 Jones">Jones</OPTION>
<OPTION VALUE="2 Parker">Parker</OPTION>
<OPTION VALUE="3 Baker">Baker</OPTION>
</SELECT>
<SELECT ID="PIDSelect" NAME="PIDSelect " SIZE=20 STATUS="Hide"
onChange='doact ion("SelectPID" ,0)'>
<OPTION VALUE="Cancel"> Cancel</OPTION>
<OPTION VALUE=" "> </OPTION>
<OPTION VALUE="1 Bolt">Bolt</OPTION>
<OPTION VALUE="2 Nut">Nut</OPTION>
<OPTION VALUE="3 Washer">Washer</OPTION>
<OPTION VALUE="4 Screw">Screw</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
<script language="javas cript" src="showdom2.j s"></script>
</body>
</html>
On Mon, 07 Jun 2004 11:45:47 +0200, Vincent van Beveren
<vi*****@provid ent.remove.this .nl> wrote:
That outer table does not properly grow to
contain the new size of the table to which the row was added. (More
specifically, I have sporadically seen the outer table grow correctly,
but then most of the time it does not grow as desired.) Is there
something that needs to be done in the code that will make the right
thing happen? (This phenomena appears in Netscape 7.1 -- things work
correctly under Internet Explorer 6.0)
I don't know why it does that, do you can an example page so I can look
at it?
A second anomoly concerns a button that appears in the newly added
row. An "onClick" event is associated with that dynamically added
button. The newly added button works correctly under Netscape 7.1 but
fails to work under Internet Explorer 6.0. (It is like Explorer will
not honor an event that is set in place by code that is dynamically
created after the page is loaded.) Shown below is an excerpt of the
code that is attempting to set up the desired button. Is there
something apecial that must be done in the code to get Explorer to
handle this properly (I have tried spelling things as both "onclick"
and also "onClick")?
You probably need to create a callback function.
function createCallBack( jsCall) {
return eval("function( ) { "+jsCall+"; }");
}
item.onclick = createCallBack( v);
Assigning things to onclick by setting attributes is not exactly right,
because onclick is an event, and not an attribute. Therefor you must
assign it like an event. Even better would be to use addEventListene r,
but I don't know how well that is supported in IE.
Good luck,
Vincent
