•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,815 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,566 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1515 | Replies: 10
 |
•
•
Join Date: Mar 2008
Posts: 7
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
FF vs IE dhtml/javascript/forms issue 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:
The form code:
Thanks in Advance,
Bob
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
•
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 103
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.
Last edited by MidiMagic : Mar 15th, 2008 at 2:14 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Mar 2008
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Re: FF vs IE dhtml/javascript/forms issue 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
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
•
•
Join Date: Mar 2008
Posts: 153
Reputation:
Rep Power: 1
Solved Threads: 19
Junior Poster
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
Here is an example of a highly Ajaxed site that we have in development: http://www.suomedia.com/ghm/
Matti Ressler
Suomedia
•
•
Join Date: Mar 2008
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
My functions are loaded in the main page. They just do not see the dynamic pages loaded via xmlhttp, sigh.
•
•
Join Date: Mar 2008
Posts: 153
Reputation:
Rep Power: 1
Solved Threads: 19
Junior Poster
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.
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):
Individual Albums can be expanded using the single + beside each one.
Matti Ressler
Suomedia
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
•
•
Join Date: Mar 2008
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Mar 2008
Posts: 153
Reputation:
Rep Power: 1
Solved Threads: 19
Junior Poster
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
Matti Ressler
Suomedia
•
•
Join Date: Jun 2006
Location: India
Posts: 6,775
Reputation: 
Rep Power: 23
Solved Threads: 330
> 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".
> 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".
Last edited by ~s.o.s~ : Mar 16th, 2008 at 5:03 am.
"I don't accept change. I don't deserve to live."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
•
•
Join Date: Mar 2008
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Previous Thread: problem with my radio button validation js
- Next Thread: CSS Brwoserresize Problems (FF+IE)
