Solved

New to AJAX, question on function

Posted on 2006-11-14
7
903 Views
Last Modified: 2008-01-09
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
Comment
Question by:dr00bie
  • 4
  • 3
7 Comments
 

Expert Comment

by:IAmMenno
ID: 17940690
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
 
LVL 2

Author Comment

by:dr00bie
ID: 17940895
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
 

Expert Comment

by:IAmMenno
ID: 17941250
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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 2

Author Comment

by:dr00bie
ID: 17941666
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
 
LVL 2

Author Comment

by:dr00bie
ID: 17982808
Hello?  I am still having problems with this issue.

Drew
0
 

Accepted Solution

by:
IAmMenno earned 50 total points
ID: 18003221
<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
 
LVL 2

Author Comment

by:dr00bie
ID: 18019068
It works great!  Thanks for helping me out on this one!

Drew
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question