Question

I am working on application to make it browser compatible. I have a jsp page which will call the Javascript functions for execution. Basically I am displaying a list of contents in my page for selection using a radio button. Here it goes:

JSP Page :

 <script language="JavaScript">
        loadcodes(10,'codesTable','#TheCodes',' ' ,'desc','<%=compositeDescTagName%>','<%=compositeDescFormName%>','<%=codeFormName%>','<%=codeIdFormName%>','document.resourceform.<%=Globals.ENFORCE_COMMENTS%>');
    </script>.

The above function will reference to the following js page:

function loadcodes(depth,tableId,dataSrc,onclickfunc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
    document.writeln("<TABLE height=100% id=PrimaryTable dataSrc='" + dataSrc + "' cellSpacing=0 cellPadding=0 border=0> <TBODY>");
    writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
    document.writeln("</TBODY></TABLE>");
}

function writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
    if (depth <= 0)
        return;
    document.writeln("<TR onclick=\"toggle(this,'" + dataSrc + "','" + compositeDescTagName + "','" + compositeDescFormName + "','" + codeFormName + "','" + codeIdFormName + "','" + enforceCommentsFormName + "')\" class=tree_indent>");
        document.writeln("<TD><IMG dataFld='image' id=Icon class=tree_node>");
    document.writeln("<SPAN dataFld=" + descFld + " class=formtext></SPAN>");
    document.writeln("<SPAN dataFld=haschildren id=HasChildren style='DISPLAY:none'></SPAN><SPAN dataFld=isleaf id=isleaf style='DISPLAY: none'></SPAN><SPAN dataFld=composite_desc id=composite_desc style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=composite_code id=composite_code style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=composite_id id=composite_id style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=comments_required id=comments_required style='DISPLAY:none'></SPAN>");
    document.writeln("</TD></TR>");
    document.writeln("<TR style='DISPLAY: none' class=tree_indent>");
        document.writeln("<TD><!-- next level -->");
        document.writeln("<TABLE class=tree_node id=node dataFld=node valign=top border=0 cellSpacing=1 cellPadding=1 >");
        document.writeln("<TBODY>");
    writeNode(--depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
        document.writeln("</TBODY>");
        document.writeln("</TABLE>");
        document.writeln("</TD>");
        document.writeln("</TR>");
}

var selectedCode;
function toggle(e,dataSrc,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
  var nextRow;
  var nextRow1;

  nextRow = e.nextSibling;

  hc = e.all.HasChildren;
  var isleaf = e.all.isleaf;

    if (nextRow.style.display == "none" && isleaf.innerText == "false")
    {
        nextRow.style.display = "";
        e.all.Icon.src = "/edcs/images/minus.gif";

        if (nextRow.all && nextRow.all[2] && !nextRow.all[2].dataSrc) 
        {
            nextRow.all[2].dataSrc = dataSrc;
        }
    } 
    else if (isleaf.innerText == "true")
    {
        // reset the bullet on the one already selected
        if (selectedCode && selectedCode.all && selectedCode.all.Icon)
            selectedCode.all.Icon.src = "/edcs/images/bullet.gif";

        e.all.Icon.src = "/edcs/images/right.gif";

        re=/'/g;

        var str = e.all.composite_desc.innerText.replace(re,"\\'");

        eval(compositeDescTagName + ".innerText = '"  + str + "'");
        eval(compositeDescFormName + ".value = '"  + str + "'");
        eval(codeFormName + ".value = '"  + e.all.composite_code.innerText + "'");
        eval(codeIdFormName + ".value = '"  + e.all.composite_id.innerText + "'");
        commentsEnforced = eval(enforceCommentsFormName + ".value");
        if (commentsEnforced == "false")
            eval(enforceCommentsFormName + ".value = '"  + e.all.comments_required.innerText + "'");

        selectedCode = e;
    }
    else
    {
        nextRow.style.display = "none";
        e.all.Icon.src = "/edcs/images/plus.gif";
    }
}

This flow works well in IE browsers but not supported by other browsers. While searching I found the list of elements supported only by IE:

1. DataSrc
2. Datafld and also IMG datafld.

Is there any alternative for the above elements with browsers or how could the modifications made in the code so that it is browser compatible? Kindly help and also it would be turn out be a template for cross browser testing.

Answer 1

Cross-browser compatibility is one of the core benefits of using a library such as jQuery, MooTools, etc.

I would recommend one of these if cross-browser compatibility is your aim – as there are entire teams working on those projects.