FF vs IE dhtml/javascript/forms issue

[macslayer]

Hello,

I am having an issue with a page that works fine in IE and not FF. Bascially it is a <div> loaded with a basic coldfusion input form that posts back to parent of the div page. Problem I am having is a validation routine in javascript seems to not to want to find my form or it's elements when I fetch the page into the div (innerhtml via xmlhttprequest) , it works perfectly when I run the page by itself even in FF. The form has a unique id and name, getElementByID only works in FF when I run the page stand-alone, document.forms[formname] also only works stand-alone in FF. I will try to encapsulate the gist of the code here. There are multiple forms on the parent of the div. It's like the form object just disappears from the document. I thought it might be forms within tables, or some malformed html that FF just doesn't like, but it looks fine. I think there is just some difference when doing dhtml and scoping of the objects in FF ? Note, the form comes up alright in the parent div, but the javascript functions just can't access the form elements.. everything works fine in IE. btw, the HTMLElement.prototype.innerHTML has been contructor settered/gettered to work with FF like IE, that works fine too in both. :) another odd thing, is that I do not see the form in the source when viewed by the client browser, is this just a fact of life for dhtml ? Anyway, any ideas on this would be apprecited, short of abandoning dhtml for FF. Oh yeah, and my Reset button will not focus properly in FF..

Javascript giving me the problem:

function validate_form() {
	var has_error=0;
	var empty_element=0;
	var x=document.forms['add_form'];
//	var x=document.forms[0];                   work's stand alone (multiple  form)on //	var x=document.getElementById('add_form');  work's stand alone only
	var div_handle = document.getElementById("form_message");
	div_handle.innerHTML = "";
	var error_message = "";

// here is x.length is undefined when dhtml'd in to the parents div ??  :(
for (var i=0;i<x.length;i++)
  	{
        empty_element=0;
		blah = x.elements[i].value;
//        alert( x.elements[i].id + ":" + x.elements[i].length +" => Blah:"+ blah + " len:"+ blah.length);
		if (blah.length == 0)
		{ empty_element=1; }
		switch (x.elements[i].id)
		{
		case "f_gr_title":
.. <snip code>
			x.elements[i].focus();
			}
	  		break;
		} // switch
	} // for

if (has_error) 	{
		div_handle.innerHTML = div_handle.innerHTML+"<br><br>";
	}
	else {
		x.submit();  // submit the form if we have no errors..
	}

} // validate_form

The form code:

<cfform id="add_form" action="index.cfm?act=add" method="POST" name="add_form" enctype="multipart/form-data" onreset="javascript:document.getElementBy('f_gr_title').focus();"> 

<TABLE border="1" cellpadding="1" cellspacing="0" bordercolor="##D2D2D2">
<!---------------- Title ----------------------->
<tr><td align="right">Title</td>
<td><input type="text" size="60" value="" id="f_gr_title" name="f_gr_title" maxlength="60" /> 
</td></tr>
<!---------------- Description ----------------------->
<tr><td align="right">Description</td>
<td> 
<textarea name="f_gr_description" cols="60" id="f_gr_description" height="30">
</textarea>
</td></tr>
<!---------------- Type ----------------------->
<tr><td align="right">Type</td>
<td><cfselect enabled="yes" accesskey="g_tcode" query="qry_type" id="f_gr_type" name="f_gr_type" display="g_tcode" value="g_tvalue" 
onChange="javascript:{if (document.getElementById('f_gr_type').value == 'Other') {
	var d = document.createElement('div');
	var zz = document.createElement('input');
	zz.setAttribute('type', 'text');
	zz.setAttribute('name', 'f_gr_type_other');
	zz.setAttribute('id', 'f_gr_type_other');
	zz.setAttribute('size', '60');
	d.appendChild(zz);
	document.getElementById('otherdiv').appendChild(d);
	document.getElementById('f_gr_type_other').focus();
} 
else {
// blank out the other_type text if they go to standard type..
	var div_handle = document.getElementById('otherdiv');
	div_handle.innerHTML = '';
//	dynamic_content('otherdiv','');

}};">
</cfselect>
<div id="otherdiv">
</div>
</td>
</tr>

<!---------------- Status ----------------------->
<tr><td align="right">Status</td>
<td>
<input type="text" value="Pending" name="f_gr_status" id="f_gr_status" disabled="disabled">
</td></tr>
</TABLE>

<br>
<div id="form_message" name="form_message"></div>

<!---------------- Buttons ----------------------->
<input type="reset" onclick="javascript:document.forms['add_form'].elements['f_gr_title'].focus();"/> 
<input type="button" onClick="javascript:cancel_add();" value="Cancel " id="cancel_button">
<input type="button" onClick="javascript:validate_form();" value="Add Request " id="add_button">
</cfform>

Thanks in Advance,
Bob

[MidiMagic]

JavaScript is defined to see the webpage's original html, but not any web page elements added by other scripts or programs. IE is the oddball by allowing JS to see the added content.

[macslayer]

Thanks !!! That explains a lot, and this is a rather fundamental revelation for me. Wow, I had been developing discrete pages to allow to easy development, and then would incorporate them
into the page via ajaxian ways, while allowing me to jump to opening up pages by themselves if my dhtml ways failed in some way. Never even looked at FF until I realized one of the main users was a mac guy using FF. The way I read this, then I need to incorporate the stand-alone pages into the orginal parent page from the start, and hide/display/manipulate them inline, and do more cross-browser study up front.. :) Sigh, live and learn. Thank you very much for making this obvious. Not once in my days of googling problems with javascript and this issue was that mentioned or obvious. I have some work ahead of me to fix this fiasco of my own making. If there is any insight on how to bridge this issue, be it javascript libraries that take whole pages and bring them into another for manipulation being already out there, that would outstanding.

Appreciation abounds,
Bob

[Suomedia]

The essential thing is that your javascript functions are loaded into your main page that the Ajax content is loaded into. You can still call those functions from within the Ajax loaded content.

Here is an example of a highly Ajaxed site that we have in development: http://www.suomedia.com/ghm/

Matti Ressler
Suomedia

[macslayer]

My functions are loaded in the main page. They just do not see the dynamic pages loaded via xmlhttp, sigh.

[Suomedia]

You need to identify the element(s) to your function when you call the function rather than relying on your function to identify the element(s), eg.

onclick="myFunction('my_element')"

I use it all the time with ajax loaded content - look at the example I posted above, it is rich with javascript. For example, if you look at "Genres", you will see a list with "Show mixes" at the top - click on the ++ to see the list expand - it uses (in multiple):

new Effect.BlindDown('my_element'); // (Scriptaculous)

Individual Albums can be expanded using the single + beside each one.

Matti Ressler
Suomedia

[macslayer]

Well, since it the form elements I need to access to validate, I have tried passing the form name or id to it, or even hard coding the form name/id in the function. Nada, zip.. it's as if the form doesn't
exist as an object anymore to js. I will try passing the form as 'this' maybe ? Nice page btw, I would link you to this one, but is it on an intranet of the City of Austin. :(

[Suomedia]

Yes, I was going to suggest trying 'document.this' (which I also use often - click one of the small speaker icons, then pass your mouse over it again, you will see it re-initialize the music player while the remaining speaker icons do not). However, you may find it necessary to pass all the element id's to the function

Matti Ressler
Suomedia

[~s.o.s~]

> another odd thing, is that I do not see the form in the source when viewed by the client
> browser, is this just a fact of life for dhtml

Yes, because it's the Javascript object XMLHttpRequest provided by the browser at work when fetching content using Ajax. AFAIK, the actual DOM contents at any point in time can be viewed in Firefox using the tool DOM Inspector.

> onClick="javascript:validate_form();"
Don't use Javascript pseudo protocol. It was meant only to be used inside the href attribute of links.

One of the ways to narrow down your problem would be to put a DOCTYPE declaration at the top of your page (without which the browser goes in quirks mode of rendering, in short you have an invalid HTML document) and validate your generated markup at W3C validator.

The next step would be to use the FF error console for spotting errors which don't show up in IE just because IE let's them "slide".

[macslayer]

Thanks, guys. So, let me make sure I have a full understanding. Is it correct to state that javascript does not allow access to rendered page elements pulled via ajax, inserted by dhtml into the document, but it is an IE quirk that allowed it ? While I understand that malformed html could weigh heavily in causing normal processing problems, your saying that you think my code would work if I dropped the dhtml innerhtml method and went pure DOM ? Then everything would be tight. In interim, I made code adjustments to see if this was FF, and just stand-alone pages for those users. :( I would rather it be clickety-click for them too, but would require a bit of retooling to go pure dom in this instance. I will eventually do it, as I see the advantages immediately. Thanks for all your input.

Bob

[Suomedia]

No, its not correct to state that (look at my dev site again, it is full of page elements "pulled via Ajax" and accessed by javascript). You just wont find the element using getElementById etc.

For example, lets say I have the following form, loaded into the page using Ajax:

<form name="elemTest" id="elemTest" onsubmit="return checkCheckBoxes();" action="">
<input type="checkbox" name="box_1" value="1">1</p>
<input type="checkbox" name="box_2" value="2">2</p>
<input type="checkbox" name="box_3" value="3">3</p>
<input type="submit" value="Submit" />
</form>

On my main page that the Ajax content is loaded into, the following will work in IE but not Firefox and others:

<SCRIPT TYPE="text/javascript">
<!--
function checkCheckBoxes() {
	var dname = document.getElementById('elemtest');
	if (dname.box_1.checked == false &&
	    dname.box_2.checked == false &&
	    dname.box_3.checked == false)
		{
		alert ('Please choose one of the checkboxes!');
		return false;
		}
	else
		{
		return true;
		}
	}
//-->
</SCRIPT>

While this will work in all:

<SCRIPT TYPE="text/javascript">
<!--
function checkCheckBoxes() {
	if (document.elemTest.box_1.checked == false &&
	    document.elemTest.box_2.checked == false &&
	    document.elemTest.box_3.checked == false)
		{
		alert ('Please choose one of the checkboxes!');
		return false;
		}
	else
		{
		return true;
		}
	}
//-->
</SCRIPT>

HTH

Matti Ressler
Suomedia