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
LVL 2
dr00bieAsked:
Who is Participating?
 
IAmMennoConnect With a Mentor Commented:
<script language="javascript" type="text/javascript">

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

function GetXmlHttpObject(){
var objXMLHttp=null;

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

This works perfectly in IE7.
0
 
IAmMennoCommented:
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.
0
 
dr00bieAuthor Commented:
Sorry for the dumb question, but I am really trying to understand this code,

What function is the function(ctlName) pointing to?

Thanks,
Drew
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
IAmMennoCommented:
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.
0
 
dr00bieAuthor Commented:
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
0
 
dr00bieAuthor Commented:
Hello?  I am still having problems with this issue.

Drew
0
 
dr00bieAuthor Commented:
It works great!  Thanks for helping me out on this one!

Drew
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.