Search code examples
javascriptdomgetelementsbytagname

getElementsByTagName sometimes returning undefined


Sorry if this has been asked before, I've read all the similar looking questions and although there's a lot that seem very similar none of them have sorted it.

I'm having trouble with getElementsByTagName - I have a webpage with an iFrame, and the iFrame is basically just calling an API and should be returning the name of the current User. Here's the relevant bit of code:

function apicallback(xml_request) {
    if (xml_request.readyState == 4 && xml_request.status == 200) {
        var xmldoc = xml_request.responseXML;
        if (xmldoc.getElementsByTagName('s:Fault').length > 0) {
            alert(xmldoc.getElementsByTagName('s:Reason')[0].childNodes[0].textContent);
        }
        else if (xmldoc.getElementsByTagName('GetUserDetailsByUserIdResponse').length > 0) {
            //process data
            document.getElementById('results').innerHTML = xmldoc.getElementsByTagName('b:FullName')[0].textContent;
        }
    }
}

Also, here's the XML response going to xmldoc - the data itself is removed but all tags not specifically null have data in them.

>   <GetUserDetailsByUserIdResponse xmlns="http://tempuri.org/">
>      <GetUserDetailsByUserIdResult xmlns:b="http://schemas.datacontract.org/2004/07/ErrisWebApi.Model"
> xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
>         <b:BirthDate></b:BirthDate>
>         <b:CommPrefID i:nil="true"/>
>         <b:FirstName></b:FirstName>
>         <b:FullName></b:FullName>
>         <b:GenderID></b:GenderID>
>         <b:LastName></b:LastName>
>         <b:LegalForename></b:LegalForename>
>         <b:LegalSurname></b:LegalSurname>
>         <b:MiddleNames i:nil="true"/>
>         <b:NameSuffix i:nil="true"/>
>         <b:PersonID></b:PersonID>
>         <b:PersonName></b:PersonName>
>         <b:PostalTitleID i:nil="true"/>
>         <b:PrefSurnameFirst i:nil="true"/>
>         <b:SimpleGenderID i:nil="true"/>
>         <b:SurnameFirst i:nil="true"/>
>         <b:TitleID></b:TitleID>
>      </GetUserDetailsByUserIdResult>   
>   </GetUserDetailsByUserIdResponse>

In Firefox and IE this works perfectly fine, in Chrome however I get the error "Cannot read property 'textContent' of undefined" - so the xmldoc.getElementsByTagName('b:FullName')[0].textContent; is the problem but I can't for the life of me figure out why it would be.

I saved the API reply as a HTML page and used Chrome's console to run that exact line of code, and I get exactly the return I expected, so have no idea why it is failing sometimes and not others.

Help please!


Solution

  • try this to get the value of the elements by tag name. I had similar problems and I've learned that the javascript function getElementsByTagName has different behaviors depending on the browser in which it is used. This is a workaround that I have used in different projects and it seems to work in all major browsers

    test = item.getElementsByTagName('b:FullName')[0];
    if(!test || test == null){
        test = item.getElementsByTagName('FullName')[0];
    }
    if(!test || test == null){
        test = item.getElementsByTagNameNS('namespaceurl', 'FullName')[0];
    }
    return test