SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Safari and Chrome not accepting getElementsByTagName

    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:
    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 + "\')");
    		}
    	}
    }

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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).
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Gumape

  5. #5
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to alert the document and its getElementById method in Chrome, maybe it will help to find out the problem:

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

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If they are ok, try the following two lines:

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

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

  8. #8
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    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?

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

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

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

  11. #11
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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...

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cssbleach View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @pmw57: I cannot post it on the web, it's from the company I work for and the project it's still in development.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cssbleach View Post
    @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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @pmw57: Ok, I'll try that

  16. #16
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here the HTML for the login page (it's a long one):

    Code:
    <?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>

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Member cssbleach's Avatar
    Join Date
    May 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •