Start Building Professional
Web Apps Today

IE6 throws [object Error] when copying loader.doXPath.nodeValue data to form

Hello,

This problem has been vexing me for many many hours. I would appreciate it if someone could help me out with this.

The goal I have is to set the values in the following form with values parsed out of the XML file, which I had just pulled down from the server. I have confirmed that the XML coming from the server is fine, the values are there and the form is there. Also, everything works just fine in Firefox. The problem is when I have to run it in the hunk of junk (IE6).

Here is the form that I need to populate:

        <form method="POST" action="login.do" onsubmit="return false;" id='specimenInfoForm'>
                <input type="hidden" name="sid" value="" />
                <input type="hidden" name="original_specimenid" value="" />
                <TABLE style="margin-top:20px;">
                <TR>
                    <TD style="width:200px;" class="formlabel">Specimen ID : </TD>
                    <TD class="tablecontent">
                        <input type="text" class="textfield" name="specimenId" />
                    </TD>
                </TR>
                <TR>
                    <TD colspan="1" class="tablecontent"> </TD>
                    <TD colspan="2">
                        <A class="linktopage" target="_blank" onclick="getReportLink(document.forms['specimenInfoForm'].original_specimenid.value);">Report</A>
                    </TD>
                </TR>
                <TR>
                    <TD colspan="1" class="tablecontent"> </TD>
                    <TD colspan="2">
                        <input type="button" class="sbutton-red" name="deleteSpecimen" value="Delete Specimen" onclick="return deleteSpecimenFromDatabase(document.forms['specimenInfoForm'].original_specimenid.value);"/>
                    </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Client ID : </TD>
                    <TD class="tablecontent">
                        <input type="text" class="textfield" name="clientId" />
                    </TD>
                    
                </TR>
                <TR>
                    <TD class="formlabel">Ref. No. : </TD>
                    <TD class="tablecontent">
                        <input type="text" class="textfield" name="refNo" />
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Agency Code : </TD>
                    <TD class="tablecontent">
                        <input type="text" class="textfield" name="agencyCode" />
                    </TD>
                    
                </TR>
                <TR>
                    <TD class="formlabel">Requestor : </TD>
                    <TD class="tablecontent">
                        <select name="requestor" style="width:250px;">
                        </select>
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Collector : </TD>
                    <TD class="tablecontent">
                        <select name="collector" style="width:250px;">
                        </select>
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Collection Date : </TD>
                    <TD class="tablecontent">
                        <input type="text" class="textfield" name="collDate" />
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Collection Time : </TD>
                    <TD class="tablecontent">
                        <input type="text" class="textfield" name="collTime" />
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Specimen Reason : </TD>
                    <TD class="tablecontent">
                        <select name="reason" style="width:250px;">
                        </select>
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Latest Order Comment : </TD>
                    <TD class="tablecontent">
                        <textarea class="textarea" name="orderComment" rows="5" cols="42"></textarea>
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Admitted Drugs : </TD>
                    <TD class="tablecontent">
                        <textarea class="textarea" name="admittedDrugs" rows="5" cols="42"></textarea>
                    </TD>
                    <TD class="tablecontent"> </TD>
                </TR>
                <TR>
                    <TD class="formlabel">Specimen Outcome : </TD>
                    <TD class="tablecontent" >
                        <select name="outcome">
                            <option value="">-- OUTCOME --</option>
                            <option value="Positive">POSITIVE</option>
                            <option value="Negative">NEGATIVE</option>
                            <option value="Pending">PENDING</option>
                            <option value="Rejected">REJECTED</option>
                        </select>
                    </TD>
                </TR>    
                <TR>
                    <TD> </TD><TD><input style="margin-top:11px;" type="button" name="" value="save" onclick="saveSpecimenInfoForm();" /></TD>
                </TR>        
            </TABLE>
            </form>



Here is a snippet of the javascript code I'm using to populate the form:



    function loadSpecimenInfoForm(loader) {
    
        console.debug("loadSpecimenInfoForm( )");
        //var f = document.forms['specimenInfoForm'];
        //var f = document.forms['specimenInfoForm'];
        var f = document.getElementById("specimenInfoForm");
        var s = "";
        var v = "";
        for(i = 0; i < f.elements.length; i++) {
            s += "[" + i + "]" + f.elements[i].name + ",";
            v += f.elements[i].value + ",";
        }
        
        console.debug("f.elements.length=" + f.elements.length + " s=" + s + " v=" + v);
        console.debug("loading 0");
        idNode                    = loader.doXPath("/specimen/id/text()",null,null,"single");

        try {
            
            var idNode_str = new String();            
            idNode_str = idNode.nodeValue;
            console.debug("idnode = " + idNode_str);
            f.elements[0].value        = idNode_str;
            console.debug("did it?");
        } catch( e) {
            console.debug("ahh!!" + e);
        }




During the troubleshooting process, I tried several ways of referencing the form (i.e. document.forms['specimenInfoForm'], document.forms[1], document.specimenInfoForm, etc). I eventually decided that the form able to be referenced ok in IE6 when my for loop showed me that everything is there:

    for(i = 0; i < f.elements.length; i++) {
            s += "[" + i + "]" + f.elements[i].name + ",";
            v += f.elements[i].value + ",";
    }

So I've eliminated that as being the problem. I also tried printing the value that I pull down from the doXPath, and it shows up just fine. I have tried just setting a value for the form element manually (i.e. f.elements[i].value = 'test';) and that works fine too!

The error is only thrown when I try to copy the value I get from doXPath.nodeValue to the form element; in all of the ways I have tried referencing the form, I get [object Error] and no other pertinent information. But everything works just fine in FireFox, in all of the ways I have tried.

Any Ideas?

Thanks,
Chris

How do you loading HTML page during tests in IE?
The problem is that IE can't process incoming XML correctly when test  page loaded by non-http link ( directly from filesystem , as c:/some.html ) 

The test-case which you are using really cause problems while loading data from XML by non-http link, to resolve issue you can try 

a) use http for page loading

b) add the next line of code
    dhtmlxAjax.get("grid.xml",function(loader){
        loader.getXMLTopNode("specimen")
        var data=loader.doXPath("/specimen/id/text()",null,null,"single");
        document.getElementById('input1').value=data.nodeValue;

getXMLTopNode is inner method of loader, which check XML object, and if it has issues - recreates XML object , allowing to use direct loading in IE. 


Also, based on used version of IE, different version of MSXML can be used by browser, and older versions may have some issues with text() locator. You can try to use  
    dhtmlxAjax.get("grid.xml",function(loader){
        loader.getXMLTopNode("specimen")
        var data=loader.doXPath("/specimen/id");
        document.getElementById('input1').value=data[0].firstChild.nodeValue;

The following code solved the issue.  I basically ended up referring to all XML nodes with absolute path so IE could figure it out.

I put everything in functions to make it cleaner and more maintainable.  The first function loads a form text field and the second function loads option select boxes.

Thanks for your help.

    function loadFormTextFromXmlLoader(loader,element,xpath,topNode) {
        try {
        //    console.debug("loading element ");
            var node_str = new String();
            //loader.getXMLTopNode(topNode);
            node        = loader.doXPath(xpath,null,null,"single");
            node_str    = node.nodeValue;
            try {   
        //        console.debug(element.name + " = " + node_str);
                element.value = node_str;
        //        console.debug("did it!");
            } catch(e) {
        //        console.debug("unable to load " + element.name + ": " + e);
            }
        } catch (e) {
        //    console.debug("error with " + element.name + e);
        }
    }
    function loadFormOptionsFromXmlLoader(loader,element,idXPath,topNode) {
        console.debug("running loadFormOptionsFromXmlLoader() for " + element.name);
        try {
        //    console.debug("loading id");
        //    loader.getXMLTopNode(topNode);
            idnode            = loader.doXPath(idXPath,null,null,"single");
            try {
                id                = idnode.nodeValue;
            } catch (e) {
        //        console.debug("no selected id set for " + element.name);
            }
           
            optionIds = loader.doXPath("//" + topNode + "/option/@id",null,null,null);
       
        //    console.debug(optionIds.length + " options to add to the select box");
            if(optionIds.length != 0) {
                for( i = 0; i < optionIds.length; i++) {
                    try {
                    oId        = optionIds[i].nodeValue;
            //        console.debug("using xpath to retrieve id " + oId + ": //" + topNode + "/option[@id=" + oId + "]/text()");
                    oVal    = loader.doXPath("//" + topNode + "/option[@id=" + oId + "]/text()",null,null,"single").nodeValue;
                    element.options[i] = new Option(oVal,oId,false,false);
            //        console.debug(element.name + " option " + i + " set to " + element.options[i].value);
                    if(id == oId) {
            //            console.debug("selecting option id " + oId);
                        element.options[i].selected = true;
                    }
                    } catch (e) {
            //            console.debug("error while adding " + optionIds[i].nodeValue + e);
                    }
                }
            }
        } catch (e) {
        //    console.debug("problem loading requestors select box " + e);
        }
    }
    function loadSpecimenInfoForm(loader) {
        console.debug("loadSpecimenInfoForm( )");
        var f = document.getElementById("specimenInfoForm");
       
        loadFormTextFromXmlLoader
            (loader,f['sid'],"//specimen/id/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['clientId'],"//specimen/clientid/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['specimenId'],"//specimen/specimenid/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['refNo'],"//specimen/refno/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['agencyCode'],"//specimen/agencycode/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['collDate'],"//specimen/datecollected/text()","specimen");   
        loadFormTextFromXmlLoader
            (loader,f['collTime'],"//specimen/timecollected/text()","specimen");                   
        loadFormTextFromXmlLoader
            (loader,f['orderComment'],"//specimen/ordercomment/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['outcome'],"//specimen/outcome/text()","specimen");
        loadFormTextFromXmlLoader
            (loader,f['admittedDrugs'],"//specimen/admitteddrugs/text()","specimen");

        loadFormOptionsFromXmlLoader(loader,f['requestor'],"//specimen/requestor/text()","requestors");
        loadFormOptionsFromXmlLoader(loader,f['collector'],"//specimen/collector/text()","collectors");
        loadFormOptionsFromXmlLoader(loader,f['reason'],"//specimen/specimenreason/text()","specimenreasons");
    }