Question

All,

I have a fairly simple javascript script that changes some text in my html page. The weird thing is that the data is only changed if I have an alert. If I hide the alert as a comment, the data doesn’t appear on the webpage. To be specific, here are the relevant pieces of the JS code:

var index=0;
var xmlObject=null;

function calcIndex(){
  return index++;
}

function showNextName(){
  retrieveNextName();
  var someText = xmlObject.getElementsByTagName("name")[0].childNodes[0].nodeValue;
  document.getElementById('nextName').innerHTML=someText;
}

function retrieveNextName(){
  var index=calcIndex();
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "Ajax_retrieveName.php?index=" + index;
  request.open("GET", url, true);
  request.onreadystatechange = createXml;
  request.send(null);
  alert("abc");
  //If the alert above is missing, the html is not modified...
}

function createXml() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      xmlObject = request.responseXML;
    }else{
      return;
    }
  }else{
    return;
  }
}

Does anyone know what might be causing that?

Answer 1

The problem is that XML object is not immediately available, because the request isn’t finished yet, so the callback hasn’t been called yet. (Alerting allows the request to finish in the time before you clock the alert box away.)

A better solution would be to have an updateElementHtml(newHtml) function and call that from within the callback.