Sending a variable to a js function - not working

[tjfoz]

Hey All,

I've been fighting this one for a few months now, and it is causing me to have to create multiple functions that basically do the same thing. I am using the three functions below to replace text between two div tags on a page, based on a link that is clicked:

<td><a href=\"javascript:void(0)\" onclick=\"htmlData('ajax/loginContent.php', 'view=1','data=2','displayField=txtResult')\">Active Jobs</a></td>\n";

Then further down the page:

<div id="txtResult">replace this content</div>

For some reason, I CANNOT send the div id name as a js variable. When I do it errors out. BUT if I replace displayField in the js functions below with "txtResult" it works fine. I am fairly new to js, so it is definitely possible that I am doing something incorrectly. Anyone have any ideas for me?

function GetXmlHttpObject(handler) {   
   var objXMLHttp=null  
   if (window.XMLHttpRequest)   
   {   
       objXMLHttp=new XMLHttpRequest()   
   }   
   else if (window.ActiveXObject)   
   {   
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")   
   }   
   return objXMLHttp   
}   
  
function stateChanged(displayField){
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")   
   {   
           document.getElementById(displayField).innerHTML= xmlHttp.responseText;   
   }   
   else {   
           //alert(xmlHttp.status);   
   }   
}   
  
// Will populate data based on input   
function htmlData(url, qStr, qStr2,displayField){
   if (url.length==0)   
   {   
       document.getElementById(displayField).innerHTML="";   
       return;   
   }   
   xmlHttp=GetXmlHttpObject()   
   if (xmlHttp==null)   
   {   
       alert ("Browser does not support HTTP Request");   
       return;   
   }   
  
   url=url+"?"+qStr; 
   if(qStr2)
     url=url+"&"+qStr2;  
   url=url+"&sid="+Math.random();   

   xmlHttp.onreadystatechange=stateChanged(displayField);   
   xmlHttp.open("GET",url,true) ;   
   xmlHttp.send(null);   
}

[Old Pedant]

Well, for starters, the argument needs to be passed as just

'txtResult'

and *NOT* as

'displayField=txtResult'

That is,

"<td><a href=\"javascript:void(0)\" "
+ "onclick=\"htmlData('ajax/loginContent.php','view=1','data=2','txtResult')\">Active Jobs</a></td>\n";

[tjfoz]

Wow... That makes a ton of sense. The rest of them are being appended to a url and somehow I just applied that to my displayField variable as well... Sorry for that bit of idiocy.

I changed it and now I receive a "Not Implemented" error on the highlighted line below:

function GetXmlHttpObject(handler) {   
   var objXMLHttp=null  
   if (window.XMLHttpRequest)   
   {   
       objXMLHttp=new XMLHttpRequest()   
   }   
   else if (window.ActiveXObject)   
   {   
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")   
   }   
   return objXMLHttp   
}   
  
function stateChanged(displayField){
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")   
   {   
           document.getElementById(displayField).innerHTML= xmlHttp.responseText;   
   }   
   else {   
           //alert(xmlHttp.status);   
   }   
}   
  
// Will populate data based on input   
function htmlData(url, qStr, qStr2,displayField){
   if (url.length==0)   
   {   
       document.getElementById(displayField).innerHTML="";   
       return;   
   }   
   xmlHttp=GetXmlHttpObject()   
   if (xmlHttp==null)   
   {   
       alert ("Browser does not support HTTP Request");   
       return;   
   }   
  
   url=url+"?"+qStr; 
   if(qStr2)
     url=url+"&"+qStr2;  
   url=url+"&sid="+Math.random();   

xmlHttp.onreadystatechange=stateChanged(displayField);   
   xmlHttp.open("GET",url,true) ;   
   xmlHttp.send(null);   
}

Honestly, I feel like this was the original issue I was having when I was working on it a few months ago, but then I gave up (needed to get a project finished and it was easier at the time to just create additional functions). The original code sends no parameters to the stateChanged function and that seems to work just fine?

[tjfoz]

highlighted so well you can't see it.

Here is the line:

xmlHttp.onreadystatechange=stateChanged(displayField);

[Old Pedant]

Yeah, you can't pass an argument to stateChanged.

The proper coding is:

xmlHttp.onreadystatechange = stateChanged;  // NAME of function, only!

There are a couple of ways to do this. The easiest is to simply make displayField a page scope (global) variable. If you aren't worried about two calls to this AJAX function colliding with each other, go with that. By far easiest.

If you can't do that, you'll have to learn about closure.

[tjfoz]

Thanks for the help Pedant!

Unfortunately I do have to worry about multiple calls colliding so closure it is

[interfacetricks]

Originally Posted by tjfoz

Thanks for the help Pedant!

Unfortunately I do have to worry about multiple calls colliding so closure it is

Here is how you can do it: When you assign a value to xmlHttp.onreadystatechange that value needs to be a function-object. You can call a function (and pass it a variable) as long as that function returns a function-object.

I've made an example (with more detailed explanation) to show how it can be done.

http://webinterfacetricks.com/event_closures/

It uses a button's onclick event handler for simplicity, but the same concept can apply to an ajax object's onreadystagechange event handler, or to anything that requires a function-object to be assigned.