Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

New to AJAX, question on function

Posted on 2006-11-14
7
Medium Priority
?
910 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
Technology Partners: 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 200 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

886 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