Submit Your Article Forum Rules

Results 1 to 5 of 5

Thread: Dynamic Rows using innerHTML in Firefox not working

  1. #1
    Junior Member
    Join Date
    Apr 2005
    Posts
    3

    Dynamic Rows using innerHTML in Firefox not working

    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.

  2. #2
    Senior Member ADAM Web Design's Avatar
    Join Date
    Dec 2003
    Posts
    2,172
    Hi,

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

  3. #3
    Junior Member
    Join Date
    Apr 2005
    Posts
    3
    <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>

  4. #4
    Senior Member ADAM Web Design's Avatar
    Join Date
    Dec 2003
    Posts
    2,172
    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.

  5. #5
    Junior Member
    Join Date
    Apr 2005
    Posts
    3
    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.

Similar Threads

  1. Flash Ad link not working in Firefox
    By jomariet in forum Flash Discussion Forum
    Replies: 7
    Last Post: 01-02-2008, 01:14 PM
  2. ALT tags not working in Firefox
    By supernatural_247 in forum Graphics & Design Discussion Forum
    Replies: 4
    Last Post: 02-24-2007, 09:59 PM
  3. Help Needed. tables not working properly in Firefox
    By NetSurferZero in forum Graphics & Design Discussion Forum
    Replies: 5
    Last Post: 02-17-2007, 02:06 PM
  4. https working in FireFox but not IE
    By nashville in forum IT Discussion Forum
    Replies: 3
    Last Post: 03-15-2006, 11:35 AM
  5. encrypted email not working in Firefox.
    By ozchris in forum Web Programming Discussion Forum
    Replies: 2
    Last Post: 07-10-2005, 09:11 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •