[SOLVED] Sending variable to 'stateChanged' function

[DaveEverFade]

Hey,

I've been trying to send a variable to the stateChanged function in my Ajax file but keep getting errors - see code below:

On the line request.onreadystatechange=stateChanged I need to send DivToUpdate with this function but it does not work

request.onreadystatechange=stateChanged(DivToUpdate) <-------- this does not work

Any help is greatly appreciated...
Dave

[i]function Ajax(GetPage, DivToUpdate, params)
<!--
{
request=GetXmlHttpObject();
if (request==null)
{
alert ("I'm sorry but your browser does not support certain aspects of this website")
return
}
var url=GetPage+".php?"
url=url+params

request.onreadystatechange=stateChanged

request.open("GET",url,true)
request.send(null)
}

function stateChanged(DivToUpdate)
{
if (request.readyState==4 || request.readyState=="complete")
{
document.DivToUpdate.innerHTML=request.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
} [/i]

[ober]

It's not possible.  I've tried this in the past MANY times and failed miserably.  The only way to do this is to update an element on the page and then read that value back in once you get to the stateChanged function.

Does that make sense?

[DaveEverFade]

Yup, makes sense.... Many thanks for that!
Dave

[DaveEverFade]

Now I have another issue with this.

[code]function Ajax(GetPage, Params, Div)
<!--
{
request=GetXmlHttpObject();
if (request==null)
{
alert ("I'm sorry but your browser does not support certain aspects of this website")
return
}
var url=GetPage+".php?"
url=url+Params

request.onreadystatechange=stateChanged
request.open("GET",url,true)
request.send(null)
UpdateDiv(Div)
}

function stateChanged()
{
if (request.readyState==4 || request.readyState=="complete")
{
ajax_buffer.innerHTML=request.responseText
}
}

function UpdateDiv(Div)
{
document.getElementById(Div).innerHTML=ajax_buffer.innerHTML
}[/code]

I've tried to get it to insert the results into my div ajax_buffer then call the function UpdateDiv. It seems to call it fine but does not populate my other div. I think it's some kind of delay problem because when I stick an alert in the code (before UpdateDiv is called) it seems to work?? Any ideas?

[Zeon]

you should do it like this:

request.onreadystatechange=function(){stateChanged(variable)}

[DaveEverFade]

You're a genius! Cheers!

[Peschello]

Dave... would you mind posting your finished code? I'm in the same situation you were, but I'm still having problems. Thanks.

[roopurt18]

I think this is exactly what zeon just said, but more elaborate.  I just got hit with the same problem.  The scenario is I have a [i]table[/i] with a [i]select[/i] in it; when the [i]select[/i] is changed it should fetch an appropriate set of data from the server and display it in the sibling [i]td[/i] to the [i]td[/i] that contains the drop down.  The catch is this is a dynamic form with multiple, identical [i]select[/i]s that all perform the same action, so using [i]id[/i] attributes is inconvenient.  I have a DOM helper function that I wrote that given a node will search for the next sibling of a certain tag type.  So the ideal solution would be to have my AJAX callback function take the [i]select[/i] that triggered the event as an input, locate the sibling [i]td[/i], and update the content there.

The select control starts like this:
[code]<select name="whatever" onChange="selOnChange();">[/code]

Here is a basic outline of my original javascript code:
[code]
// cbDataReady
// callback function for when the data is ready from the server
function cbDataReady(){
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    alert(xmlHttp.responseText);
  }
  return;
}

// selOnChange
// When this selection control changes, fetch data from the server because it's cool
// and looks good on my resume
function selOnChange(){
  // ajaxRun is an AJAX utility function that takes:
  //  url - url to open
  //  cb - callback function
  //  method - "POST" or "GET"
  //  data - parameter to the send method
  ajaxRun(path, cbDataReady, "POST", null);
  return;
}
[/code]

Now, like I said, the ideal solution is to pass in the [i]select[/i] that triggered the onChange to the cbDataReady function.  Here is how I accomplished that:

Changed the [i]select[/i] HTML to:
[code]
  <select name="whatever" onChange="selOnChange(this);">
[/code]

Changed cbDataReady to:
[code]
// cbDataReady
// sel - the select that triggered this callback
// callback function for when the data is ready from the server
function cbDataReady(sel){
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    alert(xmlHttp.responseText);
    alert(sel);
  }
  return;
}
[/code]

Changed selOnChange to the following:
[code]
// selOnChange
// sel - the select that triggered the event
// When this selection control changes, fetch data from the server because it's cool
// and looks good on my resume
function selOnChange(sel){
  // Build our own callback function
  var cb = function(){ cbDataReady(sel); }

  // ajaxRun is an AJAX utility function that takes:
  //  url - url to open
  //  cb - callback function
  //  method - "POST" or "GET"
  //  data - parameter to the send method
  ajaxRun(path, cb, "POST", null);
  return;
}
[/code]

I've not thoroughly tested this as of yet, but so far it appears to be working.  An alert(sel) in cbDataReady comes up with a select control.

That should help anyone hit with this same problem.