Solved

New to AJAX, question on function

Posted on 2006-11-14
7
904 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Any Way to rotate banner ads from Commission Junction? 2 37
Use Mid in Html 6 22
Calculating percentage 2 29
REST call Failing 1 10
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

756 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