Safari and Chrome not accepting getElementsByTagName

[cssbleach]

Hi All

I'm using getElementsByTagName() to retrieve some elements and do something with them. It works fine in FF but not in Chrome and Safari. Please can someone tell me what to do, I'm really stuck? Thanks in advance.

In Chrome it says: "Uncaught TypeError: Cannot call method 'getElementsByTagName' of null"

Here's the code:

function popUpSAPWindow(){
	// Find all links in the page and put them into an array.
        //Below is the line that gives me trouble
	var linksInOrderLinesTable = document.getElementById("orderLinesTable").getElementsByTagName("a"); 
	var linksLen = linksInOrderLinesTable.length;
	
	// If the link text is 'SAP' then modify the attributes
	for(var i = 0; i < linksLen; i++){
		if(linksInOrderLinesTable[i].innerHTML == "SAP"){
			// Store the 'href' value of each SAP link.
			var sapHref = linksInOrderLinesTable[i].href;
			
			// Modify the attributes of each SAP link.		
			linksInOrderLinesTable[i].setAttribute("href", "javascript:return false;");
			linksInOrderLinesTable[i].setAttribute("onclick", "sapNewWindow(\'" + sapHref + "\')");
		}
	}
}

[siteguru]

You have a tag called orderLinesTable? ( <orderLinesTable>Some stuff</orderLinesTable> )

Are you reading an XML file? If yes, then is document.getElementsByTagName the correct method to be using? (I suspect not).

[cssbleach]

No, it's not an XML document. It's a table tag with an id named 'orderLinesTable'. Basically, I want to collect all the 'a' tags in the table and check the ones that have the word 'SAP' then do something with them. But browsers give the 'null' error. That's where I'm stuck.

[gumape]

hi,
because of some reasons the getElementById method returns null in Chrome and Safari and so the getElementsByTagName of null is called.
Since your code works well in FF, two cases are possible:
- the table tag with an id named 'orderLinesTable' is created by JavaScript and some errors occur during the creation in Chrome and Safari
- when the popUpSAPWindow method is called, the DOM hierarchy is not ready. In that case, call the popUpSAPWindow method when the document has been loaded (onload event)

For further details, see the following pages:
onload event,
getElementById method.

[cssbleach]

The table is not created by javascript, it's a straight HTML, and the function is called through the window.onload already.

I've even tried: if(document.getElementById == null) do something, but it's still giving the same error. So I don't know what to do...

[gumape]

Try to alert the document and its getElementById method in Chrome, maybe it will help to find out the problem:

function popUpSAPWindow() {
	alert (document);				 // must be HTMLDocument
	alert (document.getElementById); //  function getElementById() {[native code]}
	// ...

[gumape]

If they are ok, try the following two lines:

alert (document.body);	// [object HTMLBodyElement]
alert (document.body.innerHTML);

The innerHTML of the body must contain the table with id 'orderLinesTable'.

[cssbleach]

I understand what you want me to do, the problem is on the login page. Chrome and Safari don't let me login because the table doesn't exist in the login page, which is normal. So I put a condition that if the table with the id 'orderLinesTable' exist do the window pop-up for each anchor tag with the word 'SAP', but yet they are still giving me that error. It's like they don't even perform the check. (Or they don't even bother).

Here's the updated code:

function popUpSAPWindow() {
	
	var orderLinesTable = document.getElementById("orderLinesTable");
	var linksInOrderLinesTable = [];
	
        //Here's the check
	if(orderLinesTable){
		linksInOrderLinesTable = orderLinesTable.getElementsByTagName("a");
		var linksLen = linksInOrderLinesTable.length;
		
		for(var i = 0; i < linksLen; i++){
			var sapHref = linksInOrderLinesTable[i].href;
			linksInOrderLinesTable[i].setAttribute("href", "javascript:return false;");
			linksInOrderLinesTable[i].setAttribute("onclick", "sapNewWindow(\'" + sapHref + "\')");
		}
	}
}

Shouldn't they perform the check that I have put?

[gumape]

The getelementById method returns a reference to the element with the specified id or null if it does not exist. A reference to an HTML element is evaluated to true, null is evaluated to false in a condition (if statement).
So your check is OK, it means the orderLinesTable is not null in Chrome and Safari.

If you get the same error ("Uncaught TypeError: Cannot call method 'getElementsByTagName' of null"), i think the error message is generated by another call of the getElementsByTagName method not by the orderLinesTable.getElementsByTagName. The orderLinesTable variable cannot be null at that point in your updated source code.

[gumape]

Try this:

	if(orderLinesTable){
		alert ("before");
		linksInOrderLinesTable = orderLinesTable.getElementsByTagName("a");
		alert ("after");

if the orderLinesTable.getElementsByTagName causes the error, the second alert will not be executed.

[cssbleach]

@Gumape: my code works fine with the if statement. But I think it's something to do with Chrome and Safari themselves. They have trouble with MIME Types and this is the message they give: "Resource interpreted as script but transferred with MIME type text/plain".

It says the same to all my javascript, including jquery, jquery ui, my own javascript.

I don't get it, since I've checked every script tags and they all have type="text/javascript". This is weird...

[paul_wilkins]

I don't get it, since I've checked every script tags and they all have type="text/javascript". This is weird...

Investigating this by 3rd party (where we instruct you to do things) is not as effective as when we can investigate directly ourself.

If you put up on the web as a test page that demonstrates the problem, we will have immediate answers for you.

[cssbleach]

@pmw57: I cannot post it on the web, it's from the company I work for and the project it's still in development.

[paul_wilkins]

@pmw57: I cannot post it on the web, it's from the company I work for and the project it's still in development.

We can create test pages that run your scripting code, but they work with no problem.

In order for us to be able to help you with your issue, more information is required about the HTML code and scripting.

Are you able to simplify the html and scripting to only the "bare-basics" that still show the trouble, and provide that simplified code?

[cssbleach]

@pmw57: Ok, I'll try that

[cssbleach]

Here the HTML for the login page (it's a long one):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Log In</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript">/>
<meta name="DC.title" content="Log In" />
<meta name="eGMS.accessibility" scheme="eGMS.WCAG10" content="A" />

<meta name="DC.coverage" content="GB" />
<meta name="DC.language" scheme="ISO 639-2/T" content="eng" />
<meta name="description" content="DESCRIPTION HERE" />
<meta name="keywords" content="KEYWORDS HERE" />
<!--[if lte IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![end if]-->

<style type="text/css" media="screen, projection, print">@import "/css/common.css";</style>
<style type="text/css" media="screen, projection, print">@import "/css/adminCommon.css";</style>
<link rel="stylesheet" href="/goose/css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen, projection, print" />

<script src="/js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script src="/js/goose.js" type="text/javascript"></script>

<script type="text/javascript">
// <![CDATA[
function init() {
	//Call individual functions here etc.
	popUpSAPWindow();
}

window.onload = init
// ]]>
</script>


<!--[if IE 6]>
<style type="text/css" media="screen, projection, print">@import "/goose/css/ie6.css";</style>
<![endif]-->

<!--[if gte IE 7]>
<style type="text/css" media="screen, projection, print">@import "/goose/css/ie7plus.css";</style>
<![endif]-->

</head>
<body id="" class="size1">

    <div id="waitingMsgOverlay">
        <div id="waitingMsgBox">
            <div id="waitingMsg"></div>
            <p id="waitingMsgParag">Processing, please wait..... <img src="/goose/img/ajax-loader-bigRoller-lightblacktransp-bg.gif" alt="loading image" /></p>
        </div>
    </div>
    <!-- End waitingMsgOverlay -->
    
    <!-- Start accessibility navigation -->
    <div class="hidden">
        <p>Jump to the following:</p>
        <ul>
            <li><a href="#maincontentstart" accesskey="J" title="Jump to main content [Accesskey: J]">Main content</a></li>
        </ul>
    </div>
    <!-- End accessibility navigation -->

    <!-- Start header -->
    <div id="header">
        <p id="strap"><a href="http://www.somelink.co.uk" title="To some website">Some website</a> - Lorem ipsum...</p>
    </div>

    <!-- End header -->
    
	<div id="wrapper">

		<a name="pagestart" id="pagestart"></a>
		
		<!-- Start IE6 message -->
		<!--[if IE 6]>
		<div id="ie6">
		
			<p><strong>Welcome Internet Explorer 6 User</strong></p>
			
			<p>While every effort has been made to ensure that this application functions correctly in your browser, we strongly reccommend you upgrade to a newer version of Internet Explorer that supports the latest standards and technologies used here. Alternatively, you could use another browser such as Chrome, Firefox or Safari.</p>
		
		</div>
		<![endif]-->
		<!-- End IE6 message -->
		
		<!-- Start masthead -->
		<div id="mast">
			<!--<div id="logo"><a href="/goose/index.html" title="To the home page">Logo</a></div>-->
			<div id="logo">
            	<a href="/goose/index.html" title="To the home page"><img src="/img/logo-os.png" alt=" logo" /></a>
            </div>
			<h1>Orders<sup>beta</sup></h1>
		</div>
		<!-- End masthead -->
		<a id="top" name="top"></a>
        	
		<!-- Start main content -->
		<div id="maincontent">
			<a name="maincontentstart" id="maincontentstart"></a>

			<!-- Start user content -->
			<div id="usercontent">
				<div class="sleeve">
					<h2>Login Required</h2>
                    
                    <form class="validate" commandName="loginCommand" name="f" action="/goose/j_spring_security_check" method="post">
                        <fieldset>
                            <legend>Login Details</legend>
                            <div class="formrow">
                                <span class="formcol">
                                    <label for="j_username">Email:</label>
                                </span>
                                <input type="text" size="60" name="j_username" id="j_username"  class="formlarge required"/>
                            </div>
                            <div class="formrow">
                                <label for="j_password" class="formcol">Password:</label>
                                <input type="password" name="j_password" id="j_password" class="formlarge required"/>
                            </div>
                            <div class="formrow">
                                <input type="checkbox" name="_spring_security_remember_me" id="remember_me" />
                                <label for="remember_me">Keep me logged in for two weeks</label>
                            </div>
                            <div class="formrow">
                                <input name="submit" id="submit" type="submit" value="Login" />
                            </div>
                        </fieldset>
                    </form>
				</div>	
			</div>
			<!-- End user content -->
			<div class="clearing"></div>
		</div>
		<!-- End main content -->
	</div>
    
    <!-- Start help section -->
    <div id="help">
        <div class="columns">
            <div class="col40">
                <h3>Your super-user</h3> 
                <p>Call <strong>Janet Jones</strong> on <strong>015 3892 6099 ext 231</strong></p>
                <p>or email <a href="mailto:janet.jones@britishgasscotland.co.uk" title="janet.jones@britishgasscotland.co.uk">janet.jones@britishgasscotland.co.uk</a></p>
            </div>
    
            <div class="col60">
                <h3>We're here to help</h3>
                <p>If you can't find find the help you need on our <a href="#" title="Support pages">support pages</a> then feel free to contact us for further assistance...</p>
                <p>Call <strong>OS Help Desk</strong> on <strong>023 8012 3456</strong></p>
                <p>or email <a href="mailto:oshelpdesk@somewebsite.co.uk" title="oshelpdesk@somewebsite.co.uk">oshelpdesk@somewebsite.co.uk</a></p>
            </div>
        </div>
    
    </div>
    <!-- End help section -->

    <!-- Start footer -->
    <div id="footer">
        <p id="copyright">Some Website © copyright 2010</p>
        <ul>
            <li><a href="#" title="Help">Help</a></li>
            <li><a href="#" title="Accessibility">Accessibility</a></li>
            <li><a href="#" title="Contact Us">Contact Us</a></li>
            <li><a href="#" title="Sitemap">Sitemap</a></li>
            <li><a href="#" title="Legal &amp; Privacy">Legal &amp; Privacy</a></li>
        </ul>
    </div>
    <!-- End footer -->

</body>
</html>

[paul_wilkins]

I added to the above HTML the function from post #8 which has the check, which you said doesn't work, and it appears to work fine.

What problem are we dealing with now, the getElementById one or the "resource interpreted as script" one.

If it's the resource one, that has nothing to do with your page itself. That one is a problem with your server configuration.
Your server is sending .js files as "content-type:text/plain" when it should be sending them as "content-type:application/x-javascript" instead.

[cssbleach]

@pmw57: we're dealing with the 'resource interpreted as script' problem. I nearly doubted my javascript for a moment. That's what I've found out as well (after hours of research), it's the server that's the issue. And you've confirmed it. Thank you very much for your help.