javascript code not workign in firefox

I've a perfect working code in IE but for some reason its not working in Fire fox...can anyone suggest why?

javascript

Contributors

Replies

Views

8 Years

Discussion Span

8 Years Ago

Last Post by mschroeder

I've a perfect working code in IE but for some reason its not working in Fire fox...can anyone suggest why?

<div id="rBookAddress">
		        <h5 class="instructions"><input type="checkbox" name="chkRecipeBook" id="chkRecipeBook" onclick="javascript:disableAddressBook();" />Please enter your address details to receive your Free Recipe Book:</h5>
		        <div class="extensiondatacapture" id="addBook">
		            <cfinclude template="#cf_mapping#/#memberPATH#/recipeBook/includes/addressForm.inc">
		        </div>
		    </div>



<script language="JavaScript" type="text/javascript">
		function disableAddressBook() 
		{
			toggleAddBook(document.getElementById("addBook"));
		}
		function toggleAddBook(abc) 
		{	//var abc.childNodes[0];
			if ((document.getElementById("chkRecipeBook").checked == false)&&(abc.disabled == false))
			{
				abc.disabled = true;
				alert(abc.childNodes.length);
				if (abc.childNodes && abc.childNodes.length > 0) 
				{
					for (var x = 0; x < abc.childNodes.length; x++) 
					{
						toggleAddBook(abc.childNodes[x]);
					}
				}
			}
			else if ((document.getElementById("chkRecipeBook").checked == true)&&(abc.disabled == true))
			{
				abc.disabled = false;
				if (abc.childNodes && abc.childNodes.length > 0) 
				{
					for (var x = 0; x < abc.childNodes.length; x++) 
					{
						toggleAddBook(abc.childNodes[x]);
					}
				}
			}
		}
	</script>

because IE and firefox/mozilla use a different DOM (document object model)
there are many scripts that only work in one or the other
and on the sites that offer them for download they usually state things like IE only, or "degrades gracefully in other browsers"
I do not know enough Javascript for the mozilla DOM to be able to fix it but to point you at a possibility IBM.com Migrate javascript apps from IE to Mozilla

Does all that javascript do is show and hide a DIV?

I've a checkbox above the div which is checked by default.
I want to disable the div n its chiild nodes when the check box in unticked.

Before i propose any other solutions, did you try removing the <b></b> tags from this line: <input type="checkbox" name="chkRecipeBook" id="chkRecipeBook" onclick="javascript<b></b>:disableAddressBook();" /> ?

Before i propose any other solutions, did you try removing the <b></b> tags from this line: <input type="checkbox" name="chkRecipeBook" id="chkRecipeBook" onclick="javascript<b></b>:disableAddressBook();" /> ?

mschroeder, That is a bug with code-tags. I have even posted a thread for the same (<b></b>) here.

Edited 4 Years Ago by mike_2000_17: Fixed formatting

@OP, Is it even possible to disable/enable a div tag ?

<div class="extensiondatacapture" id="addBook">
toggleAddBook(document.getElementById("addBook"));
if ((document.getElementById("chkRecipeBook").checked == false)&&(abc.disabled == false))

nav33n: well that rules out the <b></b> tags then. haha. i've had issues with IE and FF going from one to the other and having broken functionality when I have a broken tag in the javascript. When I saw the <b>'s I figured it was worth a shot.

I also assume the OP means showing and hiding of the div, but based upon the status of the checkbox. I also made the assumption that the child nodes contained in that div were form elements in which case you could hide the div and disable the form and its fields... but not sure what additional benefit that would carry.

there's no <b> in my code

<div id="rBookAddress">
<h5 class="instructions"><input type="checkbox" name="chkRecipeBook" id="chkRecipeBook" onclick="javascript:disableAddressBook();" />Please enter your address details to receive your Free Recipe Book:</h5>
<div class="extensiondatacapture" id="addBook">
<cfinclude template="#cf_mapping#/#memberPATH#/recipeBook/includes/addressForm.inc">
</div>
</div>

I also assume the OP means showing and hiding of the div, but based upon the status of the checkbox.

I figured out that much though! And also I managed to make some quick changes to his existing script. It works on both IE and firefox! @OP, Is this what you were looking for ?

<html>
<head>
<script type="text/javascript">
		function disableAddressBook() 
		{
			toggleAddBook(document.getElementById("addBook"));
		}
		function toggleAddBook(abc) 
		{	//var abc.childNodes[0];
			if ((document.getElementById("chkRecipeBook").checked)&&(abc.style.display == 'none'))
			{
				abc.style.display = 'block';
				if (abc.childNodes && abc.childNodes.length > 0) 
				{
					for (var x = 0; x < abc.childNodes.length; x++) 
					{
						toggleAddBook(abc.childNodes[x]);
					}
				}
			}
			else if (!(document.getElementById("chkRecipeBook").checked)&&(abc.style.display == 'block'))
			{
				abc.style.display = 'none';
				if (abc.childNodes && abc.childNodes.length > 0) 
				{
					for (var x = 0; x < abc.childNodes.length; x++) 
					{
						toggleAddBook(abc.childNodes[x]);
					}
				}
			}
		}
	</script>
	</head>
	<body>
	<div id="rBookAddress">
		<h5 class="instructions">
		<input type="checkbox" name="chkRecipeBook" id="chkRecipeBook" onclick="javascript:disableAddressBook();" />Please enter your address details to receive your Free Recipe Book:
		</h5>
		<div style='display: none;' id="addBook">
		  <p>Something here!!!</p>
		</div>
</div>
</body>
</html>

P.S. I didn't bother to look at what those loops do in that function.

I don't need to show or hide the div but to enable and disable the div.
Show and hide of this div is controlled by an outer div whose show an hide is controlled by clicking of a radio button...its a lil' complicated and my graphic designer who did the initial show n hide is on leave until march end ...hard luck

and this has to be done exclusively for the child nodes else it will show the div disabled still I could enter text in child nodes.

:S I don't think you can enable/disable a "div".

well....I could do it..as you can see in my code
but
its not working in Firefox...

well....I could do it..as you can see in my code
but
its not working in Firefox...

I can't. Your code doesn't seem to work on FF as well as IE on my computer. :-/ What do you mean by its working btw ?What is the script intended to do ?

(document.getElementById) ? dom = true : dom = false; //test if IE
function hideit(id) {
 if (dom) {document.getElementById(id).style.visibility='hidden';} //ie
 else {document.layers[id].visibility='hide';} } //firefox
function showit(id) {
 if (dom) {document.getElementById(id).style.visibility='visible';}//ie
 else {document.layers[id].visibility='show';} }//firefox

generic show/hide script works in firefox opera ie
usage
hideit('addbook')
showit('addbook')

@OP, Is it even possible to disable/enable a div tag ?

Yes!
Try this:

<div disabled onclick="this.disabled='';alert('thank you!')">Click to Enable</div>

This property is defined in HTML 4.0 and is defined in: World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 .

Applies To:
BODY, CAPTION, DD, DIV, DT, FONT, FORM, ISINDEX, LABEL, LEGEND, LI, MARQUEE, OL, P, UL

! This property is inheritable
Try this:

<div onclick="if(this.disabled==''){this.disabled='true';}else{this.disabled='';alert('thanks for enabling us back!')}">Click: Disable/Enable <input type="button" name="button" value="button" /></div>

Can you link to the W3C DOM Specs where you found that?

Dom Model 1
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-22445964

http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-011100101 <== Search for "Interface HTMLDivElement"

HTML 4.0 DIV Definition
http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV

HTML 4.0 "disbaled" definition
http://www.w3.org/TR/REC-html40/interact/forms.html#adef-disabled -- It does say it is inheritable, but it is not valid in any of the elements you provided: http://www.w3.org/TR/REC-html40/index/elements.html

Its not on any of the elements in the 4.01 spec either
http://www.w3.org/TR/html401/struct/global.html#edef-DIV
http://www.w3.org/TR/html401/interact/forms.html#adef-disabled

javascript