Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 911
  • Last Modified:

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
0
dr00bie
Asked:
dr00bie
  • 4
  • 3
1 Solution
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
IAmMennoCommented:
<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
 
dr00bieAuthor Commented:
It works great!  Thanks for helping me out on this one!

Drew
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now