SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast Mushroom-Man's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show / hide firefox problem

    Hi,

    I've wrote some code to do a show / hide on certain divs on our site, works nice and fine in ie... dies misserably in firefox.

    I've looked at the firefox javscript console and it makes no sense to me so i i'm lost.

    The function its bombing on is below, and if you need to see it dying in action go to http://www.ukphoneshop.com/ and go to buy anything, once your flipped to http://www.secure-ordering.net/1-contact-details.asp your on the page that dies, it seems to be dying when you either click the 'Find address' button, or tick either of the check boxes at the bottom in Additional Details.

    Code:
    function showHide(toDo){
    	var id = document.getElementById;
    	var e = document.basketform.elements;
    
    	switch (arguments[0]){
    		case 'address' :
    			id('addressDetails').className = 'show';
    			break;
    
    		case 'company' :
    			if (e["FLDCompanyName"].value != ''){
    				e["chkCompany"].checked = true;
    				}
    			if (e["chkCompany"].checked == true){
    				id('companyDetails').className = 'show';
    				}
    			else{
    				id('companyDetails').className = 'hide';
    				e["FLDTypeOfBusiness"].selectedIndex = 0;
    				e["FLDCompanyName"].value = '';
    				e["FLDCompanyReg"].value = '';
    				e["FLDCompanyVAT"].value = '';
    				e["FLDNoEmployees"].selectedIndex = 0;
    				}
    			break;
    
    		case 'port' :
    			if (e["SLDShowPort"].checked == true){
    				id('portDetails').className = 'show';
    				}
    			else{
    				id('portDetails').className = 'hide';
    				}
    			break;
    
    		case 'previousaddress1' :
    			if (parseFloat(e["FLDTAAyears"].value) < 3){
    				id('previousAddress1PostCode').className = 'show';
    				if (e["FLDPrevAddress1"].value != ''){
    					id('previousAddress1FieldsDetails').className = 'show';
    					return showHide('previousaddress2');
    					}
    				}
    			else{
    				id('previousAddress1PostCode').className = 'hide';
    				id('previousAddress1FieldsDetails').className = 'hide';
    				id('previousAddress2PostCode').className = 'hide';
    				id('previousAddress2FieldsDetails').className = 'hide';
    				}
    			break;
    
    		case 'previousaddress1fields' :
    			id('previousAddress1FieldsDetails').className = 'show';
    			break;
    
    		case 'previousaddress2' :
    			if (parseFloat(e["FLDTAAyears"].value) + parseFloat(e["FLDPrevTAAyears"].value) < 3){
    				id('previousAddress2PostCode').className = 'show';
    				if (e["FLDPrev2Address1"].value != ''){
    					id('previousAddress2FieldsDetails').className = 'show';
    					}
    				}
    			else{
    				id('previousAddress2PostCode').className = 'hide';
    				id('previousAddress2FieldsDetails').className = 'hide';
    				}
    			break;
    
    		case 'previousaddress2fields' :
    			id('previousAddress2FieldsDetails').className = 'show';
    			break;
    
    		case 'checkpostcodes' :
    			if (e["FLDPostcode"].value != ''){
    				id('addressDetails').className = 'show';
    				}
    			if (e["FLDPrevPostcode"].value != ''){
    				id('previousAddress1PostCode').className = 'show';
    				id('previousAddress1FieldsDetails').className = 'show';
    				}
    			if (e["FLDPrev2Postcode"].value != ''){
    				id('previousAddress2PostCode').className = 'show';
    				id('previousAddress2FieldsDetails').className = 'show';
    				}
    			break;
    		}
    	}

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it seems to be dying when you either click the 'Find address' button, or tick either of the check boxes at the bottom in Additional Details.
    I didn't see a 'Find address' button or any 'check boxes at the bottom in Additional Details'.

    What lines cause an error in the javascript console?

  3. #3
    SitePoint Enthusiast Mushroom-Man's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When it loads the page it says line 40, here's a copy of the console log:

    Error: uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: https://secure-ordering.net/1-contac...tem%23UC_C%230 :: showHide :: line 40" data: no]

    and line 40 is:

    e["FLDTypeOfBusiness"].selectedIndex = 0;

  4. #4
    SitePoint Member Dutchy_Michael's Avatar
    Join Date
    Nov 2004
    Location
    Utrecht - NL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You do this in your code:

    Code:
    var id = document.getElementById;
    And later on you use this as follows:

    Code:
    id('companyDetails').className ...
    FireFox seems to have a problem with that. When you alter the last bit of code directly to

    Code:
    document.getElementById('companyDetails').className ...
    it should work fine...

  5. #5
    SitePoint Enthusiast Mushroom-Man's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YAY! it works, cheers!

    Is there a particular reason firefox doesn't like it or is it just a bug do you know?

    and will the var e = document.basketform; e["field"].value stuff suffer from the same thing? (they appear to work at the moment)

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In all likelihood, your first method is an IE "shortcut" that doesn't follow the published JavaScript "standards". As with HTML and CSS, Microsoft took published specs for JavaScript and mutilated their implementation to create FUD (fear uncertainty and doubt) and thereby lock users into using MSIE.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    SitePoint Member Dutchy_Michael's Avatar
    Join Date
    Nov 2004
    Location
    Utrecht - NL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will the var e = document.basketform; e["field"].value stuff suffer from the same thing?
    It shouldn't, and doesn't - I noticed. You're simply creating a shortcut to your form elements array here, so that's pretty standard stuff.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The javascript console tells me that the exception errors are actually on lines like this:

    id('addressDetails').className = 'show';

    Firefox does not like your attempt to shorten the reference by doing this:

    var id = document.getElementById;

    I've never seen quite that format before, but it seems like 'id' should contain a reference to the 'getElementById' function object, so I would think you could do this:

    id('addressDetails');

    I used this short script to isolate the problem:
    Code:
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en" lang="en">
    <head>
    <title>html and javascript</title>
    <style type="text/css">
    <!-- 
    
    .show{}
    .hide{display: none;}
    
    -->
    </style>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers lacking javascript
    
    window.onload=function()
    {
    	document.getElementById("b1").onclick=swap;
    	
    };
    function swap()
    {
    	var id = document.getElementById;
    	alert(id);
    
    	id("test").className="hide";
    }
    
    // End hiding -->
    </script>
    </head>
    
    <body>
    
    <div id="test" class="show">some text</div>
    <input type="button" id="b1" value="hide" />
    
    </body>
    </html>
    In both IE6 and FF1.0, the alert() displays the function 'getElementById', but in FF, 'id' still causes that exception.

    You can fix the problem, by not using 'id', and instead using:

    document.getElementById("test").className="hide";

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh well, looks like some other sleuths found the problem first.

  10. #10
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I played around with some more tests, and in FF the first function reference 'b' that references a user created function does work as expected, and it displays the alert(), but the second function reference 'f' that references getElementById does not work:

    Code:
    <div id="d" class="test"></div>
    Code:
    function display(message)
    {
    	alert(message);
    }
    
    var b = display;
    //alert(b);
    b("hi");
    
    window.onload=function()
    {
    	var f = document.getElementById;
    	//alert(f);
    	alert(f("d").className);
    }
    The one thing I did notice that is different about the two function references 'b' and 'f' is that the commented out alert()'s show slightly different things: for the body of getElementById, the alert() shows: '[native code]' where the body of 'b' shows the actual code: alert(message);


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
  •