Javascript, Firefox, InnerHTML and AJAX

G

garth

I am having a problem getting the responseText from my HTTPRequestXml
object into my DIV... It works in IE, but in Firefox... nothing! Here
is the code for the page:

<!-- #include file="functions.asp" -->
<!-- #include file="inc_verytop.asp" -->
<%openDB%>
<html>
<head>
<title><%=GetText("Title",lan)%></title>
<script type="text/javascript" language="javascript">
<!--

var http = false;

function doMemberSearch(sString) {

if (sString.length >= 3) {

// document.all.pleasewaitScreen.style.pixelTop =
(document.body.scrollTop + 50);
document.all.pleasewaitScreen.style.visibility="visible";

window.setTimeout("ajaxMemberSearch('" + sString + "')",1)

} else {
document.getElementById('searchResults').innerHTML =
"";
}
}

function ajaxMemberSearch(sString) {

// if (sString.length >= 3) {

//document.all.pleasewaitScreen.style.pixelTop =
(document.body.scrollTop + 50);

if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

params = "ss=" + sString;

if (!http) {
//document.all('formcheck').submit();
//return false;
}

http.open("POST", "member_results.asp", true);
http.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
http.setRequestHeader("Content-length", params);
http.setRequestHeader("Connection", "close");
http.send(params);
http.onreadystatechange = MoveOn('searchResults');
// } else {
// document.getElementById('mem_content').innerHTML =
"";
// }
}

function MoveOn(sElement) {
if (http.readyState == 4) {
//if (http.status == 200) {
//alert(http.responseText);
result = http.responseText;
document.getElementById(sElement).innerHTML =
result;
document.all.pleasewaitScreen.style.visibility="hidden";
//} else {
//document.all('formcheck').submit();
//}
}
}

function validObject(objToTest) {
if (objToTest == null || objToTest == undefined) {
return false;
} else {
return true;
}
}

// -->
</script>
<link rel="Stylesheet" text/css" href="style.css" TITLE="Style">
</head>
<body>

<!-- #include file="inc_top.asp" -->

<table cellpadding="0" cellspacing="0"
border="0" style="width: 790px;" align="center">
<tr>
<td valign="top" style="padding-
right: 5px;">
<table cellpadding="0"
cellspacing="0" border="0" style="height: 100px; width: 190px;"
align="center" class="TopMenu">
<tr>
<td valign="top"
style="height: 8px;"><img src="images/gr_topleft.gif" border="0" /></
td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topspace.gif" border="0"
width="174px" height="8" /></td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topright.gif" border="0" /></
td>
</tr>
<tr>
<td valign="top"
align="left" colspan="3" style="background: #f9f9f9 top; border-left:
1px #8e8d8d solid; border-right: 1px #8e8d8d solid; line-height: 16px;
padding-bottom:2px; padding-left:5px; padding-right:5px; height:
100%;">
<a
href="javascript:doDetails('read');" title="<%=GetText("Details",lan)
%>"><%=GetText("Details",lan) %></a><br />
<a
href="javascript:doPassword('edit');" title="<
%=GetText("Password",lan) %>"><%=GetText("Password",lan) %></a>
</td>
</tr>
<tr>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomleft.gif" border="0" /
</td>
Click to expand...
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomspace.gif" border="0"
width="174px" height="8" /></td>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomright.gif" border="0" /
</td>
Click to expand...
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0"
cellspacing="0" border="0" style="height: 100px; width: 595px;"
align="center" id="holdingTable">

<tr>
<td valign="top"
style="height: 8px;"><img src="images/gr_topleft.gif" border="0" /></
td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topspace.gif" border="0"
width="579px" height="8" /></td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topright.gif" border="0" /></
td>
</tr>
<tr>
<td valign="top"
align="left" colspan="3" style="background: #f9f9f9 top; border-left:
1px #8e8d8d solid; border-right: 1px #8e8d8d solid; line-height: 16px;
padding-bottom:2px; padding-left:5px; padding-right:5px; height:
100%;">
<div
id="container" style="position:relative;">
<DIV
ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:20px;left:
38%;visibility:hidden">
<TABLE BORDER="0"
CELLPADDING="0" cellspacing="2" HEIGHT="40px" WIDTH="120px"
ID="pleasewaitTable" style="background-color: #ffffff;">
<TR>
<TD WIDTH="100%"
HEIGHT="100%" BGCOLOR="#c0c0c0" ALIGN="CENTER" VALIGN="MIDDLE"
class="PleaseWait">
<img
id="progressgif" src="images/progress.gif" alt="" /><br />
Please Wait
</TD>
</TR>
</TABLE>
</DIV>
<div
id="mem_content" style="display: block;">
<input
type="text" style="width: 250px;" name="membersearchtext"
id="membersearchtext"
onkeyup="javascript:doMemberSearch(this.value);" /></br>
<div
id="searchResults" style="display: block;">

</div>
</div>
</div>
</td>
</tr>
<tr>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomleft.gif" border="0" /
</td>
Click to expand...
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomspace.gif" border="0"
width="579px" height="8" /></td>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomright.gif" border="0" /
</td>
Click to expand...
</tr>
</table>
</td>
</tr>
</table>


<!-- #include file="inc_bottom.asp" -->

</body>
</html>
<%closeDB%>
 
G

garth

Sorry, that was old code, here it is as it stands (it works in IE, and
in Firefox if I alert(result) I get my formatted HTML:

<!-- #include file="functions.asp" -->
<!-- #include file="inc_verytop.asp" -->
<%openDB%>
<html>
<head>
<title><%=GetText("Title",lan)%></title>
<script type="text/javascript" language="javascript">
<!--

var http = false;

function doMemberSearch(sString) {

if (sString.length >= 3) {

// document.all.pleasewaitScreen.style.pixelTop =
(document.body.scrollTop + 50);
document.all.pleasewaitScreen.style.visibility="visible";

window.setTimeout("ajaxMemberSearch('" + sString + "')",1)

} else {
document.getElementById('searchResults').innerHTML =
"";
}
}

function ajaxMemberSearch(sString) {

// if (sString.length >= 3) {

//document.all.pleasewaitScreen.style.pixelTop =
(document.body.scrollTop + 50);

if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

params = "ss=" + sString;

if (!http) {
//document.all('formcheck').submit();
//return false;
}

http.open("POST", "member_results.asp", true);
http.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.send(params);
http.onreadystatechange = MoveOn;
// } else {
// document.getElementById('mem_content').innerHTML =
"";
// }
}

function MoveOn() {
if (http.readyState == 4) {
//if (http.status == 200) {
//alert(http.responseText);
result = http.responseText;
document.getElementById(sElement).innerHTML =
result;
document.all.pleasewaitScreen.style.visibility="hidden";
//} else {
//document.all('formcheck').submit();
//}
}
}

function validObject(objToTest) {
if (objToTest == null || objToTest == undefined) {
return false;
} else {
return true;
}
}

// -->
</script>
<link rel="Stylesheet" text/css" href="style.css" TITLE="Style">
</head>
<body>

<!-- #include file="inc_top.asp" -->

<table cellpadding="0" cellspacing="0"
border="0" style="width: 790px;" align="center">
<tr>
<td valign="top" style="padding-
right: 5px;">
<table cellpadding="0"
cellspacing="0" border="0" style="height: 100px; width: 190px;"
align="center" class="TopMenu">
<tr>
<td valign="top"
style="height: 8px;"><img src="images/gr_topleft.gif" border="0" /></
td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topspace.gif" border="0"
width="174px" height="8" /></td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topright.gif" border="0" /></
td>
</tr>
<tr>
<td valign="top"
align="left" colspan="3" style="background: #f9f9f9 top; border-left:
1px #8e8d8d solid; border-right: 1px #8e8d8d solid; line-height: 16px;
padding-bottom:2px; padding-left:5px; padding-right:5px; height:
100%;">
<a
href="javascript:doDetails('read');" title="<%=GetText("Details",lan)
%>"><%=GetText("Details",lan) %></a><br />
<a
href="javascript:doPassword('edit');" title="<
%=GetText("Password",lan) %>"><%=GetText("Password",lan) %></a>
</td>
</tr>
<tr>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomleft.gif" border="0" /
</td>
Click to expand...
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomspace.gif" border="0"
width="174px" height="8" /></td>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomright.gif" border="0" /
</td>
Click to expand...
</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0"
cellspacing="0" border="0" style="height: 100px; width: 595px;"
align="center" id="holdingTable">

<tr>
<td valign="top"
style="height: 8px;"><img src="images/gr_topleft.gif" border="0" /></
td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topspace.gif" border="0"
width="579px" height="8" /></td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topright.gif" border="0" /></
td>
</tr>
<tr>
<td valign="top"
align="left" colspan="3" style="background: #f9f9f9 top; border-left:
1px #8e8d8d solid; border-right: 1px #8e8d8d solid; line-height: 16px;
padding-bottom:2px; padding-left:5px; padding-right:5px; height:
100%;">
<div
id="container" style="position:relative;">
<DIV
ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:20px;left:
38%;visibility:hidden">
<TABLE BORDER="0"
CELLPADDING="0" cellspacing="2" HEIGHT="40px" WIDTH="120px"
ID="pleasewaitTable" style="background-color: #ffffff;">
<TR>
<TD WIDTH="100%"
HEIGHT="100%" BGCOLOR="#c0c0c0" ALIGN="CENTER" VALIGN="MIDDLE"
class="PleaseWait">
<img
id="progressgif" src="images/progress.gif" alt="" /><br />
Please Wait
</TD>
</TR>
</TABLE>
</DIV>
<div
id="mem_content" style="display: block;">
<input
type="text" style="width: 250px;" name="membersearchtext"
id="membersearchtext"
onkeyup="javascript:doMemberSearch(this.value);" /></br>
<div
id="searchResults" style="display: block;">

</div>
</div>
</div>
</td>
</tr>
<tr>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomleft.gif" border="0" /
</td>
Click to expand...
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomspace.gif" border="0"
width="579px" height="8" /></td>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomright.gif" border="0" /
</td>
Click to expand...
</tr>
</table>
</td>
</tr>
</table>


<!-- #include file="inc_bottom.asp" -->

</body>
</html>
<%closeDB%>
 
D

David Mark

Sorry, that was old code, here it is as it stands (it works in IE, and
in Firefox if I alert(result) I get my formatted HTML:

<!-- #include file="functions.asp" -->
<!-- #include file="inc_verytop.asp" -->
<%openDB%>
Click to expand...

Don't post the server side script. Just post the HTML and JS
generated (and only the part that is in question.)
<html>
<head>
<title><%=GetText("Title",lan)%></title>
<script type="text/javascript" language="javascript">
<!--

var http = false;

function doMemberSearch(sString) {

if (sString.length >= 3) {

// document.all.pleasewaitScreen.style.pixelTop =
(document.body.scrollTop + 50);
document.all.pleasewaitScreen.style.visibility="visible";
Click to expand...

document.all? That won't work in most browsers. Use
document.getElementById.
window.setTimeout("ajaxMemberSearch('" + sString + "')",1)

} else {
document.getElementById('searchResults').innerHTML =
"";
}

}

function ajaxMemberSearch(sString) {

// if (sString.length >= 3) {

//document.all.pleasewaitScreen.style.pixelTop =
(document.body.scrollTop + 50);

if(navigator.appName == "Microsoft Internet Explorer") {
Click to expand...

This is meaningless. Use feature detection. There was a recent
thread here that discussed how to properly instantiate an Ajax request
object.
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

params = "ss=" + sString;

if (!http) {
//document.all('formcheck').submit();
//return false;
}

http.open("POST", "member_results.asp", true);
http.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.send(params);
http.onreadystatechange = MoveOn;
// } else {
// document.getElementById('mem_content').innerHTML =
"";
// }

}

function MoveOn() {
if (http.readyState == 4) {
//if (http.status == 200) {
//alert(http.responseText);
result = http.responseText;
document.getElementById(sElement).innerHTML =
result;
document.all.pleasewaitScreen.style.visibility="hidden";
Click to expand...

You are using gEBI half of the time and document.all the other half.
This makes no sense.
//} else {
//document.all('formcheck').submit();
//}
}

}

function validObject(objToTest) {
if (objToTest == null || objToTest == undefined) {
return false;
} else {
return true;
}

}

// -->
</script>
<link rel="Stylesheet" text/css" href="style.css" TITLE="Style">
</head>
<body>

<!-- #include file="inc_top.asp" -->

<table cellpadding="0" cellspacing="0"
border="0" style="width: 790px;" align="center">
<tr>
<td valign="top" style="padding-
right: 5px;">
<table cellpadding="0"
cellspacing="0" border="0" style="height: 100px; width: 190px;"
align="center" class="TopMenu">
<tr>
<td valign="top"
style="height: 8px;"><img src="images/gr_topleft.gif" border="0" /></
td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topspace.gif" border="0"
width="174px" height="8" /></td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topright.gif" border="0" /></
td>
</tr>
<tr>
<td valign="top"
align="left" colspan="3" style="background: #f9f9f9 top; border-left:
1px #8e8d8d solid; border-right: 1px #8e8d8d solid; line-height: 16px;
padding-bottom:2px; padding-left:5px; padding-right:5px; height:
100%;">
Click to expand...

Why post (or use) all of these nested tables and inline styles?
<a
href="javascript:doDetails('read');" title="<%=GetText("Details",lan)
%>"><%=GetText("Details",lan) %></a><br />
Click to expand...

This link won't do anything when scripting is disabled. Don't use the
javascript protocol. Use the onclick event.
<a
href="javascript:doPassword('edit');" title="<
%=GetText("Password",lan) %>"><%=GetText("Password",lan) %></a>
</td>
Click to expand...

Same here.
</tr>
<tr>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomleft.gif" border="0" /></td>

<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomspace.gif" border="0"
width="174px" height="8" /></td>
<td valign="bottom"
style="height: 8px;"><img src="images/gr_bottomright.gif" border="0" /></td>

</tr>
</table>
</td>
<td valign="top">
<table cellpadding="0"
cellspacing="0" border="0" style="height: 100px; width: 595px;"
align="center" id="holdingTable">

<tr>
<td valign="top"
style="height: 8px;"><img src="images/gr_topleft.gif" border="0" /></
td>
<td valign="top"
style="height: 8px;"><img src="images/gr_topspace.gif" border="0"
width="579px" height="8" /></td>
Click to expand...

Units in a width attribute? Tables-in-tables-with-spacers? This page
is a mess. I haven't viewed it, but I assume this is all in the name
of rounded corners.
<td valign="top"
style="height: 8px;"><img src="images/gr_topright.gif" border="0" /></
td>
</tr>
<tr>
<td valign="top"
align="left" colspan="3" style="background: #f9f9f9 top; border-left:
1px #8e8d8d solid; border-right: 1px #8e8d8d solid; line-height: 16px;
padding-bottom:2px; padding-left:5px; padding-right:5px; height:
100%;">
<div
id="container" style="position:relative;">
<DIV
ID="pleasewaitScreen" STYLE="position:absolute;z-index:5;top:20px;left:
38%;visibility:hidden">
Click to expand...

Why the sudden switch to CAPS for tag names and attributes? Use
lowercase.
<TABLE BORDER="0"
CELLPADDING="0" cellspacing="2" HEIGHT="40px" WIDTH="120px"
ID="pleasewaitTable" style="background-color: #ffffff;">
<TR>
<TD WIDTH="100%"
HEIGHT="100%" BGCOLOR="#c0c0c0" ALIGN="CENTER" VALIGN="MIDDLE"
class="PleaseWait">
<img
id="progressgif" src="images/progress.gif" alt="" /><br />
Please Wait
</TD>
</TR>
</TABLE>
Click to expand...

A table for a progress gif?
 
R

rf

Does anyone have any constructive comments towards the actual question
asked??
Click to expand...

Not when presented with that great load of code to debug by eye. I thought
David made a pretty good stab at identifying a few of your problems. AFAIKT
it could be anything. I don't even know what language (the non-HTML bit)
that is. Half of it commented out and the rest is very poorly layed out and
even then looks like HTML 3.0 and will never validate.

Provide a URL that we may debug with our debuggers, not a bunch of code. If
you can't eyeball your own code then how do you expect me to? These days if
I don't see a URL (for this sort of problem) I simply move on to the next
post.

At best provide a URL to a totally simplified test case showing the just the
actual problem. Often this in itself will show you where the problem is.
 
G

garth

Not when presented with that great load of code to debug by eye. I thought
David made a pretty good stab at identifying a few of your problems. AFAIKT
it could be anything. I don't even know what language (the non-HTML bit)
that is. Half of it commented out and the rest is very poorly layed out and
even then looks like HTML 3.0 and will never validate.

Provide a URL that we may debug with our debuggers, not a bunch of code. If
you can't eyeball your own code then how do you expect me to? These days if
I don't see a URL (for this sort of problem) I simply move on to the next
post.

At best provide a URL to a totally simplified test case showing the just the
actual problem. Often this in itself will show you where the problem is.
Click to expand...

It's not my code, I just have to fix it... I know it can be cleaned up
alot, I doing some of that while I trying to get some advice on the
Javascript/InnerHTML/Firefox thing... In the end I worked it out
myself and it turned out to be nothing to do with the AJAX or the
JavaScript, but the fact that the HTML being returned in responseText
had some invalid HTML formatting in it, eg:

<table>
<form>
<tr>...
</tr>
</form>
</table>

Since nesting the form tag inbetween table elements is invalid,
FireFox did not validate the string as HTML and hence did not apply it
to the innerHTML.

G!
 
R

rf

In the end I worked it out
myself and it turned out to be nothing to do with the AJAX or the
JavaScript, but the fact that the HTML being returned in responseText
had some invalid HTML formatting in it, eg:

<table>
<form>
<tr>...
</tr>
</form>
</table>

Since nesting the form tag inbetween table elements is invalid,
FireFox did not validate the string as HTML and hence did not apply it
to the innerHTML.
Click to expand...

Which someone would have spotted immediately *IF* they had a url to be able
to exercise the code.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Image shifts to the right when export the page to pdf 4
SendGrid email issue in responsive Gmail 1
Help with Visual Lightbox: Scripts 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Nested Loop Insert Page Break 1
Having trouble centering contents of td ? 3
Help with my responsive home page 2

Members online

Total: 21 (members: 2, guests: 19)
Robots: 442

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top