Javascript problems in Firefox: displays blank page

Forum Moderators: open

Message Too Old, No Replies

Javascript problems in Firefox: displays blank page

href javascript call prompts FF to display blank page with "true"

arachnoid

7:08 pm on Aug 22, 2008 (gmt 0)

I'm perplexed by this one.

I"m using the following code to call a simple expand/collapse toggle function.

<p><a href="javascript:toggleMe('divID')">Title</a></p>
<div id="divID" style="display:none">
<p>blah blah blah</p>
</div>

It works fine in Safari (haven't tested IE yet) but in Firefox, clicking on the link prompts it to display a blank page with the word "true". The function executes OK on the main page, but can anyone tell me why FF does this? And if I can stop it? I've tried adding the statement target="_self" to the link attributes, but it makes no difference.

The following modification works just fine

<p><a href="javascript://" onclick="return toggleMe('divID')">Title</a></p>
<div id="divID" style="display:none">
<p>blah blah blah</p>
</div>

but it seems a bit redundant to use onclick in a link when href does the same thing.

[edited by: arachnoid at 7:54 pm (utc) on Aug. 22, 2008]

arachnoid

7:54 pm on Aug 22, 2008 (gmt 0)

Sorry.

I should have included the Javascript. It's no doubt relevant.

function toggleMe(a){
 var e=document.getElementById(a);
 if(!e)return true;
 if(e.style.display=="none"){
 e.style.display="block"
 } else {
 e.style.display="none"
 }
 return true;
}

rocknbil

4:19 pm on Aug 23, 2008 (gmt 0)

You're misunderstanding the effect of the return value here. When you add JS to alink, the return value determines whether or not the browser will follow the link. Since the value returns true, that means go ahead and follow the link - but the value of the link is not a location, it's "javascript", and that Javascript returns a single value . . . true. Hence when it follows the link, that's what displays.

So you'd want to always return false from this function - which would allow you to use the link for non-Javascript clients so they can still access the content.

Try this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <script type="text/javascript"> 
  function toggleMe(a){ 
    if (document.getElementById(a)) { 
    e=document.getElementById(a); 
    e.style.display=(e.style.display && (e.style.display=="none"))?"block":"none"; 
    } 
    return false; 
   }  
 </script> 
</head> 
<body> 
<p><a href="link-to-non-JS-support_page.html" onclick="return toggleMe('divID')">Title</a></p> 
<p id="divID" style="display:none;">blah blah blah</p> 
</body> 
</html>

arachnoid

6:24 pm on Aug 23, 2008 (gmt 0)

So the error is in the js file? This is a script I sourced a couple of years back (Javascript is mostly beyond me) and implemented with button links elsewhere, which worked perfectly in all the major browsers I tested. I did wonder about that return true after this happened but didn't know enough to pursue it. I see now why it's having this effect here. Thanks for explaining it so comprehensively.

Thanks also for the "link-to-non-JS-support_page.html" suggestion. I assume then that onclick takes precedence over href?

Another quirk of this script is that if I use a CSS class to style the <div> that's expanded/collapsed, then initially it's necessary to click twice on the link to get the toggle to take effect. If I use an inline style declaration, the first click initiates the function so there's no need to click again. Do you know why using CSS should require a second click?