AJAX is wonderful but it doesn't like ME

I hope someone can help me with this. I am trying to allow users to login to my websit without reloading the entire page. I'd like them to login and stay on the same page, just refreshing the <DIV> where the login box is originally, and upon server response, update the <DIV> to reflect the Welcome <<USER>> HTML with the links for managing their profiles and content on my website.

So the response from the server comes upon submitting, without reloading the page, Just the DIV, that is fine. However, the response comes back in HTML and somehow the browser does NOT render the HTML and instead displays the stuff as plain text. See below:

This is the output being sent by my ASP code on the server, which is initially a LOGIN box and upon login, the variable changes to the below and shoots it back to the AJAX object.

PLEASE HELP!!!!
=====================================
<div id="user"><form action='search' method='post' name='search'><p class='SecHead'>Search for 9 Things</p><p class='RigthPs'><br /><input type='text' name='Search' size='27' /></p><input type='image' src='../Images/Gologin.gif' /></form><hr style='height: 1px; width: 193px;' class='style2' /><table width='85%' border='0' bgcolor='#edefed' cellpadding='0px' cellspacing='5px'><tr><td>Welcome:<p class='SecHead'>Jovanky De Los Santos</p><a href='members/authormanagement.asp'>Manage your content</a><br /><a href='members/authormessages.asp'>View Messages</a><br /><a href='authormanagement.asp'>Manage your Profile</a><br /><hr style='height: 1px; width: 185px;' class='style2' /><a href='includes/rightnav.asp?logout=true'>Sign out</a></td></tr></table></a></div>
======================================
HERE IS MY AJAX CODE

<script language="javascript" type="text/javascript">
var request = null;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch(trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("OOPS, I'm unable to process your request!");
}
function userAccess() {
var LoginEmail = document.getElementById("email").value;
var LoginPassword = document.getElementById("password").value;
var url = "includes/login.asp";
createRequest();
request.open("POST", url, true);
request.onreadystatechange = updatePage;
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("Login=" + ("true") +
"&LoginEmail=" + escape(LoginEmail) +
"&LoginPassword=" + escape(LoginPassword));
}
function updatePage() {
/*ert(request.responseText);*/
if (request.readyState == 4) {
var serverresponse = request.responseText;
var finaldisplay = document.getElementById("user");
replaceText(finaldisplay, serverresponse);
}
}
</script>

HERE IS MY HTML AROUND THE BOX
==============================
<div class="child" id="Loginchild" style="left: 0px; top: 0px">
<%=LoginForm%>

<hr style="height: 1px; width: 193px;" class="style2" />
<p class="RigthPs">
Find More Here:
</p>...and more which is irrelevant...
===========================

 

This thread really belongs in Javascript, but anyway... are you using Firebug or web developer toolbar? If what you're saying is true (that you are getting html back) then try viewing the generated source and paste it here.

 

the problem may be with your replacetext function, could you post that here as well?

replaceText(finaldisplay, serverresponse);

Code (markup):

I'm not familiar with that function if it's built in JavaScript, but I always use innerhtml to add html to an element.. example below

document.getElementById("MyDivID").innerHTML="your code or text here";

Code (markup):

essentially whatever div you tell this to write to will replace the existing code/text within the layer with the new code/text.

Assuming you're trying to use the layer Loginchild I would change the 'replacetext with the below code.

document.getElementById("Loginchild").innerHTML=serverresponse;

Code (markup):

The layer with the id has to exist beforehand in the markup I am sure you know.. give it a try and let me know

 

Thanks guys James is on the money, it was the replaceText(finaldisplay, serverresponse); I just used a document.getelementbyId() = Variable. It works now...