asked on

AJAX - textbox won't change background color

I have the following default.aspx and default.aspx.cs and I cannot figure out why the textbox won't change background colors. The debugger steps through all of the server side code without error but when I get back to the webpage there is no change in color.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax C# Example</title>
<style type="text/css">

</style>
</head>
<body>
<form autocomplete="off" id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" Visible=false></asp:TextBox>
</div>
</form>
</body>
</html>
<script language="javascript">
var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;

/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadXMLDoc(url,method,params,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
if (!method){
method="GET";
}
if (!contentType && method=="POST"){
contentType='application/x-www-form-urlencoded';
}
if (window.XMLHttpRequest){
this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
try{
var loader=this;
this.req.onreadystatechange=function(){
net.ContentLoader.onReadyState.call(loader);
}
this.req.open(method,url,true);
if (contentType){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}catch (err){
this.onerror.call(this);
}
}
}

net.ContentLoader.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}

net.ContentLoader.prototype.defaultError=function(){
alert("error fetching data!"
+"\n\nreadyState:"+this.req.readyState
+"\nstatus: "+this.req.status
+"\nheaders: "+this.req.getAllResponseHeaders());
}

function doIt(){
var strValue = document.getElementById("<%=TextBox1.ClientID %>").value;
var url = 'default.aspx?id=' + strValue;
var strParams = strValue;
var loader1 = new
net.ContentLoader(url,FillDropDown,null,
"POST",strParams);
}
function FillDropDown(){
//alert("returned");
}

</script>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox1.Attributes.Add("onblur", "doIt()");
}

if (Request.QueryString["id"] == "Andy")
DoIt();
}

public void DoIt()
{
TextBox1.BackColor = ColorTranslator.FromHtml("#f1f1f1");
}

}

aki4u

do you have in address path "id=Andy" ?
e.g. "default.aspx?id=Andy"

sutorius

ASKER

yes, dynamically

var strValue = document.getElementById("<%=TextBox1.ClientID %>").value;
var url = 'default.aspx?id=' + strValue;

aki4u

try this:

function doIt(){
var txtbox = document.getElementById("<%=TextBox1.ClientID %>");
if (txtbox.value=='Andy')
txtbox.style.backgroundColor = '#f1f1f1';
}

sutorius

ASKER

I am trying to change the color from the server side (c#) after the xmlhttprequest, prior to callback. You solution is aimed at the javascript.

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox1.Attributes.Add("onblur", "doIt()");
}

if (Request.QueryString["id"] == "Andy")
DoIt();
}

public void DoIt()
{
TextBox1.BackColor = ColorTranslator.FromHtml("#f1f1f1");
}

}

ASKER CERTIFIED SOLUTION

aki4u

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sutorius

ASKER

Thank you.