Help script working in IE but not Firefox

[AMRAAM]

Hi there Im having an issue with some javascript that works fine in IE, but in FF is not working properly.

The script is used to display a list of check boxes, the user can expand, which can checked to enabke a users selection of products. This is the script:

<script type="text/javascript">

    var xcNode = [];

    // m = Parent UL ID

    // c = 
    function xcSet(m, c, q, isCompletedLength) 
	{
        if (document.getElementById && document.createElement) 
		{
            var xs = m;
            m = document.getElementById(m).getElementsByTagName('ul');
            var d, p, x, h, i, j;
          
            for (i = 0; i < q; i++) 
			{
                
                var xp = document.getElementById("_" + xs + i);
                if (d = xp.getAttribute('id')) 
				{
                    if (navigator.userAgent.indexOf("Firefox") != -1) 
					{
                        var lstr = TrimTags((document.getElementById(xs).innerHTML));
                        xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', lstr.length, isCompletedLength);
                        x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', lstr.length, isCompletedLength);
                    }
                    else 
					{
                        xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', (document.getElementById(xs).innerText).length, isCompletedLength);
                        x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', (document.getElementById(xs).innerText).length, isCompletedLength);
                    }

                    p = xp.parentNode;
                    if (h = !p.className) 
					{
                        j = 2;
                        while ((h = !(d == arguments[j])) && (j++ < arguments.length));
                        if (h) 
						{

                            if (xp.name == parseURL()) 
							{
                                xp.style.display = 'block';
                                x = xcNode[d + 'c'];
                            }
                            else 
							{
                                xp.style.display = 'none';
                                x = xcNode[d + 'x'];
                            }
                        }
                    }

                    p.className = c;
                    

                    var expand = document.getElementById("expandBtn_" + xs + "0");
                    expand.insertBefore(x, expand.firstChild);
                }
            }
        }
    }

works fine in IE, but not in Firefox where the expanded list is not showing the current number of items (checkboxes), it shows 34 check boxes in IE but only 17 in firefox.

Thanks in advance

[tinfanide]

Can ya post the full codes including ya HTML part?
By the way, when I pasted ya script in Dreamweaver, this line is invalid:

        if (document.getElementById && document.createElement)

[AMRAAM]

<script type="text/javascript">

    var xcNode = [];

    // m = Parent UL ID

    // c = 
    function xcSet(m, c, q, isCompletedLength) 
	{
        if (document.getElementById && document.createElement) 
		{
            var xs = m;
            m = document.getElementById(m).getElementsByTagName('ul');
            var d, p, x, h, i, j;
          
            for (i = 0; i < q; i++) 
			{
                
                var xp = document.getElementById("_" + xs + i);
                if (d = xp.getAttribute('id')) 
				{
                    if (navigator.userAgent.indexOf("Firefox") != -1) 
					{
                        var lstr = TrimTags((document.getElementById(xs).innerHTML));
                        xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', lstr.length, isCompletedLength);
                        x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', lstr.length, isCompletedLength);
                    }
                    else 
					{
                        xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', (document.getElementById(xs).innerText).length, isCompletedLength);
                        x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', (document.getElementById(xs).innerText).length, isCompletedLength);
                    }

                    p = xp.parentNode;
                    if (h = !p.className) 
					{
                        j = 2;
                        while ((h = !(d == arguments[j])) && (j++ < arguments.length));
                        if (h) 
						{

                            if (xp.name == parseURL()) 
							{
                                xp.style.display = 'block';
                                x = xcNode[d + 'c'];
                            }
                            else 
							{
                                xp.style.display = 'none';
                                x = xcNode[d + 'x'];
                            }
                        }
                    }

                    p.className = c;
                    

                    var expand = document.getElementById("expandBtn_" + xs + "0");
                    expand.insertBefore(x, expand.firstChild);
                }
            }
        }
    }

    function parseURL() 
	{
        var tempLoc = new String(document.location.href);
        if ((iIndex = tempLoc.indexOf("#")) != -1) 
		{
            return tempLoc.substring(iIndex + 2, tempLoc.length);
        }
        else 
		{
            return "";
        }

    }

    function TrimTags(str) 
	{
        var tempStr = str;
        var iStart = 0;
        var iStr = -1;
        var fStr = -1;
        while ((iStr = tempStr.indexOf("<", iStart)) != -1) 
		{
            if ((fStr = tempStr.indexOf(">")) != -1) 
			{
                tempStr = tempStr.substring(0, iStr) + tempStr.substring(fStr + 1, tempStr.length);
            }
            else 
			{
                iStart = iStr + 1;
            }
        }
        tempStr = tempStr.replace("\n", "");
        tempStr = tempStr.replace("\r", "");
        tempStr = TrimString(tempStr);
        return tempStr;
    }

    function TrimString(sInString) 
	{
        sInString = sInString.replace(/^\s+/g, "");
        return sInString.replace(/\s+$/g, "");
    }

    function xcShow(m) 
	{

        var tmpLyr = document.getElementById(m);

        if (tmpLyr != null) 
		{
            xcXC(m, 'block', m.replace(/expandBtn/, "") + 'c', m.replace(/expandBtn/, "") + 'x');
        }
    }


    function xcHide(m) 
	{

        var tmpLyr = document.getElementById(m);

        if (tmpLyr != null) {
            xcXC(m, 'none', m.replace(/expandBtn/, "") + 'x', m.replace(/expandBtn/, "") + 'c');
        }
    }


    function xcXC(e, d, s, h) 
	{
        
        try
        {
			var xp = document.getElementById(e.replace(/expandBtn/, ""));
			xp.style.display = d;
			xcNode[h].style.display= "inline";
			xcNode[s].style.display= "inline";
			//alert(d);
			//alert(xcNode[h].innerHTML);
			e = document.getElementById(e);
			e.replaceChild(xcNode[s], xcNode[h]);

			xcNode[s].firstChild.focus();
        }
        catch(err)
        {
        }
    }

    function xcCtrl(m, c, s, v, f, t, parLength, isCompletedLength) {
        var a = document.createElement('a');
        a.setAttribute('href', 'javascript:xc' + f + '(\'expandBtn' + m + '\');');
        a.setAttribute('title', t);
        a.style.color = "black";
        a.appendChild(document.createTextNode(v));
        var d = document.createElement('div');
        d.setAttribute('id', 'div_s' + m);

  

        d.appendChild(a);
        return xcNode[m + s] = d;
    }

    function showPackProductDetail(linkHref, layerId) {
        var lyr = document.getElementById(layerId);

        if (lyr.style.display == "none") {
            lyr.style.display = "block";
        }
        else {
            lyr.style.display = "none";
        }
    }

    function updateCustomPackItem() {
        var lyr = document.getElementById("packSelectedItem");
        var inputChk = document.getElementsByTagName("input");
        selectedPackItem = "";

        for (i = 0; i < inputChk.length; i++) {
            if (inputChk[i].name.indexOf("chk_pack_") > -1) {
                if (inputChk[i].checked) {
                    if (selectedPackItem == "") {
                        selectedPackItem = inputChk[i].name;
                    }
                    else {
                        selectedPackItem = selectedPackItem + "," + inputChk[i].name;
                    }
                }
            }
        }

        if (lyr != null) {
            lyr.value = selectedPackItem;
            //alert(lyr.value);
        }
    }

    function updateCustomePackItemCheckbox(selectedId) {
        var inputChk = document.getElementsByTagName("input");
        var ids = selectedId.split(",");

        for (i = 0; i < inputChk.length; i++) {
            for (j = 0; j < ids.length; j++) {
                if (inputChk[i].name == ids[j]) {
                    inputChk[i].checked = true;
                    temp = inputChk[i].name.replace("chk_pack_", "").split("_");
                    if (temp != null && temp.length > 0) {
                        eval("Pack_" + temp[0] + "++;");
                    }
                }
            }
        }
    }
    
    function resetPackList(prd_id,status)
    {
     var listChk = document.getElementsByTagName('input'); 
     
     for (i = 0; i < listChk.length; i++) 
     { 
      if(listChk[i].type == "checkbox" && listChk[i].name.indexOf('chk_pack_'+prd_id) >-1 ) 
      {  
      
       if(status) 
         {
          listChk[i].disabled = false;
         }
         else
         {
          listChk[i].checked = false;
          listChk[i].disabled = true;
          }
      }  
     }
    }
    
    function displayErrorPackLayer(layer_id)
    {
     HideAll(); 
     ShowHidSel(1);
     
     for(j=0;j< packDivList.length;j++)
     {
      if(packDivList[j] != null && packDivList[j].indexOf(layer_id) > -1)
      {
       try
       {
        xcShow(packDivList[j].replace(layer_id+'|',''));
       }catch(err)
       {
        btnControl.disabled = false;
       }
       return true;
      }
     }
    }
</script>



<script type="text/javascript">
<!--
    var myArr = new Array();
    var CatNum;
    var CatArr = new Array();
    var ChkNum = 0;

    function LoadCatArr(CtNum) {
        if (CatNum) {
            if (ChkNum == 0) {
                var tempx;
                if (tempx = document.getElementById("aCatHead_" + CatNum)) {
                    tempx.style.color = "blue";
                }
            }
            else {
                var tempx;
                if (tempx = document.getElementById("aCatHead_" + CatNum)) {
                    tempx.style.color = "red";
                }
            }


            CatArr[CatNum] = ChkNum;
            if (CatArr[CtNum])
                ChkNum = CatArr[CtNum];
            else
                ChkNum = 0;
            CatNum = CtNum;
        }
        else {
            if (CatArr[CtNum]) {
                ChkNum = CatArr[CtNum];
                CatNum = CtNum;
            }
            else {
                ChkNum = 0;
                CatNum = CtNum;
            }
        }
    }

    function HideAll() {
        if (CatArr.length == 0)
            LoadSubCatArr();
        for (i = 0; i < testArr.length; i++) {
            for (j = 0; j < testArr[i].length; j++) {
                e = document.getElementById("par_" + testArr[i][j]);
                e.style.display = "none";

                e = document.getElementById("_x" + testArr[i][j] + "0");
                e.style.display = "none";

                e = document.getElementById("HdR" + testArr[i][j]);
                e.style.display = "none";
            }
        }

        for (i = 20; i < document.getElementsByTagName("div").length; i++) {
            if ((document.all[i].tagName).toLowerCase() == "div") {
                if (((document.all[i].id).toLowerCase()).indexOf("div_s_x") != -1) {
                alert(document.all[i].id + "MARK");
                    document.all[i].style.display = "none";
                }
            }
        }
    }

    function LoadSubCatArr() {
        var eleObj = document.forms[0].elements["hdSelChks"];
        if (eleObj.value) {
            var TempCatArr = (eleObj.value).split("|");
            for (i = 1; i < TempCatArr.length; i++) {
                CatArr[i] = TempCatArr[i];
                if (CatArr[i] > 0) {
                    if (tempx = document.getElementById("aCatHead_" + i)) {
                        tempx.style.color = "red";
                    }
                }
            }
        }
    }

    function ShowHidSel(num) {
        for (i = 0; i < testArr[num].length; i++) {
            e = document.getElementById("HdR" + testArr[num][i]);
            e.style.display = "block";

            e = document.getElementById("par_" + testArr[num][i]);
            e.style.display = "block";

            e = document.getElementById("div_s_x" + testArr[num][i] + "0");
            e.style.display = "inline";
        }
    }

    function loadChkVals(btnControl) {
        if (document.forms[0].elements["hdSelChks"]) {
            var eleObj = document.forms[0].elements["hdSelChks"];
            eleObj.value = "";

            CatArr[CatNum] = ChkNum;
            for (i = 0; i < CatArr.length; i++) {
                if (CatArr[i]) {
                    eleObj.value = eleObj.value + CatArr[i] + "|";
                }
                else {
                    eleObj.value = eleObj.value + "0|";
                }
            }
        }
        
        if(window.checkSelectedPack)
        {
         var validateResult = checkSelectedPack(btnControl);
         
         if(validateResult) { <%=Page.GetPostBackEventReference(btnNext)%> } 
         else
         {
          btnControl.disabled = false;
          return false;
         }
        }
        
        <%=Page.GetPostBackEventReference(btnNext)%>

    }
 
//-->
</script>

 <div id="c2">
<input type="hidden" name="hdSelChks" value="<%=Request.Form["hdSelChks"] %>">
<asp:Panel id="pnlProductList" runat="server">
<%= "<script>" + PackClientSideJavaScript + "</script>" %>


<div class="SelectSubject">

<asp:Repeater id="rptProducts" runat="server">
<headertemplate>
    <table border="0" cellspacing="0" cellpadding="0" width="559">
  <tr><td>
</headertemplate>
<itemtemplate>
   <table border="0" cellspacing="0" cellpadding="0" width="100%">
   <%# GetCatHeadings(DataBinder.Eval(Container.DataItem, "PRC_NAME").ToString())%>
   </table>
   <table border="0" cellspacing="0" cellpadding="0" width="100%" id="HdR<%# RetIncPost(DataBinder.Eval(Container.DataItem, "PRC_NAME").ToString()) %>">
    <tr><td colspan="5">
    <font id="x<%# RetPost() %>">
    <b><a id="a_x<%# RetPost() %>0">
    <table border="0" id="par_<%# RetPost() %>" name="par_<%# RetPost() %>" cellspacing="0" cellpadding="0" width="559" style="padding: 0px;">
     <tr bgcolor='<%# ColorTranslator.ToHtml(BackgroundColor()) %>'>
     <td valign="top" width="5">
     <asp:label id="lblId" visible="false" text='<%# DataBinder.Eval(Container.DataItem, "PRD_ID")%>' runat="server" />
     <asp:label id="lblParentId" visible="false" text='<%# DataBinder.Eval(Container.DataItem, "PRD_IS_SUBS_PRODUCTS")%>' 
     runat="server" />
     <asp:checkbox id="chkProduct" onclick='<%# CheckBoxJS(DataBinder.Eval(Container.DataItem, "PRD_ID").ToString(), DataBinder.Eval(Container.DataItem, "PAC_TYPE").ToString(),(DataBinder.Eval(Container.DataItem, "PAC_ITMS") == System.DBNull.Value) ? 0 : Convert.ToInt32(DataBinder.Eval(Container.DataItem, "PAC_ITMS")),RetPost().ToString()) %>' runat="server" />
     </td>
     <td valign=top width=100% style="background-image:url('<%# Page.Request.ApplicationPath 
     %>/system_images/dots.gif');background-position:top right;background-repeat: repeat-x;padding-top:2px">
     &nbsp;<b><asp:label id="lblName" BackColor='<%# BackgroundColor() %>' text='<%# DataBinder.Eval(Container.DataItem, "PRD_NAME")%>' runat="server"/></b>
     &nbsp;<span id="expandBtn_x<%# RetPost() %>0"></span></td>
     <td valign=top align=right style="background-image:url('<%# Page.Request.ApplicationPath 
     %>/system_images/dots.gif');background-position:top left;background-repeat: repeat-x;padding-top:2px">
     <asp:label id="lblPrice" text='<%# DataBinder.Eval(Container.DataItem, "PRV_PRICE", "{0:0.00}")%>' visible="false" 
     runat="server" />
     <asp:label id="lblGross" text='<%# (Convert.ToDouble(DataBinder.Eval(Container.DataItem, "PRV_PRICE")) * (1 + taxRate / 100)).ToString("0.00")%>' 
     visible="false" runat="server" />
     <asp:label ID="Label1" BackColor='<%# BackgroundColor() %>' 
     text='<%# GetPrice(DataBinder.Eval(Container.DataItem, "PRD_CURRENCY").ToString(), 
     Convert.ToDouble(DataBinder.Eval(Container.DataItem, "PRV_PRICE")), Convert.ToDouble(DataBinder.Eval(Container.DataItem, "PRV_PRICE")) * (1 + taxRate / 100)) %>' style="padding-right:4px" runat="server"/>
     </td>
     </tr>
    </table> 
    </a>
    </b>
    </font></td></tr>
    <tr><td colspan="5">
     <table id="_x<%# RetPost() %>0" name="_x<%# RetPost() %>0" border="0" cellspacing=0 cellpadding=0 width="100%">
      
       <tr>
     <td valign=top bgcolor="#f7e4b1"><img src="system_images/spacer.gif" width="2" height="1" /></td>
     <td valign=top colspan=5 style="padding-left:8px;padding-top:4px">
       <asp:Panel id="pnlDetails" visible='<%# showAllDetails %>' runat="server">
       <%# DisplayProductDetail(DataBinder.Eval(Container.DataItem, "PRD_ID").ToString(),DataBinder.Eval(Container.DataItem, "PRD_DESC").ToString(),DataBinder.Eval(Container.DataItem, "PRD_LEARNING_UNITS").ToString(),DataBinder.Eval(Container.DataItem, "PRD_CPD_DURATION").ToString(),DataBinder.Eval(Container.DataItem, "PRD_ACCESS_UNTIL").ToString(),DataBinder.Eval(Container.DataItem, "PRD_MEDIUM").ToString(),DataBinder.Eval(Container.DataItem, "PRD_TYPE").ToString(), (DataBinder.Eval(Container.DataItem, "PAC_ITMS") == System.DBNull.Value) ? 0 : Convert.ToInt32(DataBinder.Eval(Container.DataItem, "PAC_ITMS")), DataBinder.Eval(Container.DataItem, "PAC_TYPE").ToString()) %>
     </asp:Panel>    </td>
     </tr>
     </table>
    </td></tr>
   </table>
</itemtemplate>
<footertemplate>
  </td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td><p style="padding:10px"><B>Note: </B>Please select your courses by ticking the check boxes besides each course(s) and then click ‘Buy now’ to add them to your cart.</p></td></tr>
 </table>
</footertemplate>
</asp:Repeater>
<input type="hidden" name="packSelectedItem" value=""/>
</div>


<%= "<script>" + ClientSideJavaScript + "</script>" %>
<%= "<script>" + ClientSideJavaScriptArr  + "\nmyArr = testArr;\nHideAll();\n</script>" %>


<br>
</asp:Panel>


</div>

[tinfanide]

Ya can use Firefox web console to debug it for ya.
Scripts are too long for humans to scan. Errors often are overlooked.
Be careful with nodes. IE treats them in a much different way from Firefox. I noticed ya used parentNode.

[AMRAAM]

Thats the thing, the console isnt showing any errors.

thanks

[devnull69]

By the way, when I pasted ya script in Dreamweaver, this line is invalid:

Code:

if (document.getElementById && document.createElement)

No it isn't.

It is a feature check for getElementById and createElement. But although it is valid I don't think it is needed any more.

[AMRAAM]

Thanks for the help guys, I am seeing over 1000 validation output errors when putting the code through a w3c validator, is there someway to narrow down to the part of the code that is causing the problem for firefox and why does it working fine in IE??

thanks

[Old Pedant]

You can't show us ASP.NET code and expect us to be able to see the problems in HTML/JavaScript.

We don't have your server, we don't have all the other stuff needed to support your ASP.NET page.

If you want help with HTML/JS, you need to bring the page up in YOUR browser and then click on the VIEW menu of the browser and then on the SOURCE or PAGE SOURCE menu item. That will show you the HTML/JS as the browser sees it. Copy/paste *THAT* to here.

Better yet, show us the page live. That is, give us a URL we can look at.

**********

I have to say that the line if (document.getElementById && document.createElement) even being *in* there makes me wonder how up-to-date this code is. There's no modern browser that needs that test. Plus, if the test fails, the code will do nothing at all.

I'd start by replacing it with if ( true )

[AMRAAM]

thanks for the advice, i found the problem, firefox was tripping string of text that is used to pass a parameter to a function as a peice a java script, however some of the html within the parameter was not formatted properly which IE overlooked.

[Old Pedant]

Well, that's a nice catch! Yeah, IE tends to be more forgiving of HTML mistakes than other browsers. That's just a minor compensation for all the other trouble it causes, I guess. <grin/>