Dynamic Rows using innerHTML in Firefox not working

mohithmv · #1 (**permalink**) 04-07-2005, 03:55 AM

Hi All,

I have a Javascript function which dynamically generates rows containing a List box having fixed options.

Whenever i add a new row through my function the previously selected values in List box are not getting retained. This works fine in IE6 but not in FireFox 1.0 PR.

This feature i am implementing using ASP and Javascript.

ADAM Web Design · #2 (**permalink**) 04-08-2005, 12:36 PM

Hi,

Is there a sample we could look at? It might help us better understand and solve your problem.

mohithmv · #3 (**permalink**) 04-11-2005, 06:55 AM

<HTML>
<HEAD>

<script language="javascript">
var intNoOfOrderBy=0;
function AddOrderBy()
{
var strPreviousRows;
var strName,strNewRow;
var strId;
strPreviousRows=document.getElementById('branch3') .innerHTML;

intNoOfOrderBy=parseInt(intNoOfOrderBy)+1;

strName="name='OrderByRow"+intNoOfOrderBy+"' ";
strId="id='OrderByRow"+intNoOfOrderBy+"' ";

strNewRow="<TR VALIGN='CENTER'"
strNewRow=strNewRow+strName
strNewRow=strNewRow+strId
strNewRow=strNewRow+" HEIGHT='25px'> "

if (intNoOfOrderBy==1)
{
strNewRow=strNewRow+"<TD valign='bottom' ALIGN='LEFT' WIDTH='2%'>"
}
else
strNewRow=strNewRow+"<TD valign='center' ALIGN='LEFT' WIDTH='2%'>"

strNewRow=strNewRow+"*"
strNewRow=strNewRow+"<INPUT "
strName="name='chkOrderBy"+intNoOfOrderBy+"' ";
strId="id='chkOrderBy"+intNoOfOrderBy+"' ";
strNewRow=strNewRow+strName
strNewRow=strNewRow+strId
strNewRow=strNewRow+" type=checkbox CLASS='clsInput'>"
strNewRow=strNewRow+"</TD>"
strNewRow=strNewRow+"<TD ALIGN='LEFT' WIDTH='25%' class='clsLabel'>"

if (intNoOfOrderBy==1)
{
strNewRow=strNewRow+"Field Name"
strNewRow=strNewRow+"<DIV VALIGN='CENTER'> "
}
else
strNewRow=strNewRow+"<DIV VALIGN='TOP'> "

strNewRow=strNewRow+"<SELECT "
strName="name='cboOrderByFieldName"+intNoOfOrderBy +"' ";
strId="id='cboOrderByFieldName"+intNoOfOrderBy+"' ";
strNewRow=strNewRow+strName
strNewRow=strNewRow+strId
strNewRow=strNewRow+"STYLE='WIDTH: 180px; ' SIZE=1 MAXLENGTH=35 CLASS='clsInput'>"

strNewRow=strNewRow+"</SELECT>"
strNewRow=strNewRow+"</DIV>"
strNewRow=strNewRow+"</TD>"

strNewRow=strNewRow+"<TD VALIGN='TOP' ALIGN='LEFT' WIDTH='20%' class='clsLabel'>"

if (intNoOfOrderBy==1)
{
strNewRow=strNewRow+"Order"
}

strNewRow=strNewRow+"<DIV VALIGN='TOP'>"
strNewRow=strNewRow+"<SELECT "

strName="name = 'cboOrderBy"+intNoOfOrderBy+"'";
strId="id = 'cboOrderBy"+intNoOfOrderBy+"'";

strNewRow=strNewRow+strName
strNewRow=strNewRow+strId
strNewRow=strNewRow+" SIZE=1 MAXLENGTH=35 CLASS='clsInput'>"

strNewRow=strNewRow+"<OPTION VALUE='ASC' SELECTED> Ascending"
strNewRow=strNewRow+"<OPTION VALUE='DESC'> Descending"
strNewRow=strNewRow+"</SELECT>"
strNewRow=strNewRow+"</DIV>"

strNewRow=strNewRow+"</TD>"

strNewRow=strNewRow+"<TD VALIGN='TOP' ALIGN='LEFT' WIDTH='20%' class='clsLabel'>"
if (intNoOfOrderBy==1)
{
strNewRow=strNewRow+"Move Up/Down"
}

strNewRow=strNewRow+"
"
strNewRow=strNewRow+"[img]../images/imgArrowMoveUp.gif[/img]"

strNewRow=strNewRow+"[img]../images/imgArrowMoveDown.gif[/img]"
strNewRow=strNewRow+"</TD>"
strNewRow=strNewRow+"<TD WIDTH='40%'>"
strNewRow=strNewRow+"</TD>"
strNewRow=strNewRow+"</TR>"

//for netscape or FireFox
strPreviousRows=strPreviousRows.replace("</tbody></table>","")
// for IE
strPreviousRows=strPreviousRows.replace("</TBODY></TABLE>","")
strNewRow=strNewRow+"</tbody></table>"
document.getElementById('branch3').innerHTML=strPr eviousRows+strNewRow;

//This part is actually from loop. for ex. it is given as static
AddToOrderByComboBox('Field 1');
AddToOrderByComboBox('Field 2');
AddToOrderByComboBox('Field 3');
AddToOrderByComboBox('Field 4');
AddToOrderByComboBox('Field 5');
AddToOrderByComboBox('Field 6');
AddToOrderByComboBox('Field 7');
AddToOrderByComboBox('Field 8');

}

function AddToOrderByComboBox(strNewRowValue)
{
var intIndex,intResIndex;
var strNewRowValue,arrDataType;
var optionObject;
var strIndex,objItem;
var blnFlag;
optionObject = new Option(strNewRowValue);
intIndex=intNoOfOrderBy;

intResIndex=eval('document.frmAdvSearch.cboOrderBy FieldName'+intIndex+'.options.length');

strIndex='cboOrderByFieldName'+intIndex;
objItem = document.getElementById(strIndex);

objItem.options[intResIndex]=optionObject
objItem.options[intResIndex].value=strNewRowValue
}
</script>

</HEAD>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" >

<FORM NAME="frmAdvSearch" method="post">
<TABLE LEFTMARGIN="0" CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="98%" height="70%" align="center">

<TR HEIGHT="20" ALIGN="TOP" >
<TD WIDTH=100%>
<TABLE BORDER=1 WIDTH=100% CELLSPACING="0"

CELLPADDING="0">
<TR height="1" CLASS="clsGrid">
<TD WIDTH="5%">
<DIV onClick="

showBranch('branch3');swapFolder('folder3')">
[img]../images/imgExpanded.gif[/img]
</DIV>
</TD>
<TD WIDTH="95%" VALIGN="TOP">
<TABLE WIDTH="100%">
<TR>
<TD

WIDTH=15%>

Order By
</TD>
<TD

ALIGN="RIGHT">

<INPUT TYPE="BUTTON" class="clsInput" id=btnAdd title="Add"

style="width:67px;height:19px;CURSOR: pointer;" NAME="btnAdd" value="Add" onClick="javascript:AddOrderBy()">

</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>

<TR HEIGHT="1">
</TR>
<TR>
<TD VALIGN="TOP" WIDTH=100%>
<SPAN ALIGN="TOP" class="branch" id="branch3">
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="

0" CELLSPACING="0">
<TBODY id="OrderBy" name="OrderBy">

</TABLE>
</SPAN>
</TD>
</TR>
</table>
</BODY>
</HTML>

ADAM Web Design · #4 (**permalink**) 04-11-2005, 12:23 PM

I actually meant somewhere where we could see the output, but okay...this will have to do.

First off...your attributes within the tags in the JScript are single-quoted, or in some cases not at all. Try double-quoting them by using this: \" .

Second, you should have each of your else actions contained within brackets like you do your if actions. e.g. else {action}.

Also, some your attributes aren't quoted and contain hard returns within the HTML code itself. That might be throwing it off as well.

I'm not sure if those are causing the problem, but they certainly aren't helping the situation.

mohithmv · #5 (**permalink**) 04-12-2005, 06:33 AM

Hi,
i'll rectify the code accordingly. If you can provide me with your email id i'll send the required file for you to run and see. Else you can just copy my code as posted earlier into a .txt file and modify the .txt extension with .html extension. and run the same in IE and Firefox PR.