asked on

New to AJAX, question on function

First off, this is my first AJAX experience, I gleaned my code from w3cshools.com,

I have an app that I am working on, I need the following AJAX/Javascript function to return a name in 2 different places. Therefore I am attempting to re-write the function so that the textbox element name is not hard-coded into the function, I would rather pass the element name to the function. Here is the code,

<script language="javascript">
var xmlHttp

function showName(RegNo)
{
if (RegNo.length==0)
{
document.getElementById("txtName1").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="db/cli/shared/getresname.asp"
url=url+"?RegNo="+RegNo
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
var txtboxName = txtElement;
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtName1").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>

This function is called by the following line,

<input type="text" id="txt1" onBlur="showName(this.value)">

And the value is returned to,

First Name: <span id="txtName1"></span>

I need this function to accept a span id and then return the data to that span. Like, onBlur="showName(this.value,"txtName1")" and the data will be returned to <span id="txtName1"></span>.

Can this be done?

Thanks,
Drew

IAmMenno

Change the showName function declaration to this:

function showName(RegNo, ctlName)

And in the showName function change the line xmlHttp.onreadystatechange to this:

xmlHttp.onreadystatechange=getStateChanged(ctlName);

Change the stateChanged function to this:

function stateChanged(ctlName)
{
var txtboxName = txtElement;
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById(ctlName).innerHTML=xmlHttp.responseText;
}
}

Finally add this function:

getStateChanged = function(ctlName){
      return function(){
            stateChanged(ctlName);
      }
}

That should work. All of this can be done much easier if you just put the entire function in your showName function, kind of like this:

xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById(ctlName).innerHTML=xmlHttp.responseText;
}
};

And of course still keep the ctlName in your function arguments. Either way it's pretty easy.

dr00bie

ASKER

Sorry for the dumb question, but I am really trying to understand this code,

What function is the function(ctlName) pointing to?

Thanks,
Drew

IAmMenno

getStateChanged = function(ctlName){
return function(){
stateChanged(ctlName);
}
}

This code defines a function called getStateChanged, that returns a function that calls the stateChanged function with the ctlName argument that was passed to the function getStateChanged. It seems a unnecessarily complex, and it is.

Option number 2 I pointed out really is much better; it will also let you keep the scope of your xmlhttp variable local to your function. The "function returning a function" construction is very useful though, exactly for hooking up events.

dr00bie

ASKER

Ok, now I am getting an Object Expected error, here is my new script,

<script language="javascript">
var xmlHttp

function showName(RegNo,ctlName)
{
if (RegNo.length==0)
{
document.getElementById(ctlName).innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="db/cli/shared/getresidentname.asp"
url=url+"?RegNo="+RegNo
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged(ctlName);
xmlHttp.open("GET",url,true)
xmlHttp.send(null)

xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById(ctlName).innerHTML=xmlHttp.responseText;
}
};

xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById(ctlName).innerHTML=xmlHttp.responseText;
}
};
}

getStateChanged = function(ctlName){
return function(){
stateChanged(ctlName);
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>

The error is popping on the document.getElementById(ctlName).innerHTML=xmlHttp.responseText; line. I am calling the function like this, <input type="text" id="txt1" onBlur="showName(this.value,"txtHint")">

Thanks,
Drew

dr00bie

ASKER

Hello? I am still having problems with this issue.

Drew

ASKER CERTIFIED SOLUTION

IAmMenno

membership

This solution is only available to members.

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

Start Free Trial

dr00bie

ASKER

It works great! Thanks for helping me out on this one!

Drew