Question

I have a page with a dropdown. The onchange event calls a Javascript function (below) that includes an Ajax block that retrieves data and populates a TEXTAREA. On the surface, everything works.

I can select any item in the list with no problems. However, if I select an item that has previously been selected, the Ajax call appears to hang. It looks like maybe some weird caching issue or something. If I close the browser and reload the page, all items work again until I re-select.

I’ve tested for the readyState and status properties when it’s hanging, but I get nothing. Am I missing something?

The page is a client project behind authentication so I can’t post a URL, but here’s the Ajax code. This is in a PHP page, but there’s no PHP script related to this.

function getText( id ) { var txt = document.getElementById( 'MyText' );  txt.disabled = 'disabled'; txt.innerText = ''; txt.className = 'busy';  var oRequest = zXmlHttp.createRequest(); oRequest.open( 'get', 'get_text.php?id=' + id, true ); oRequest.send( null );  oRequest.onreadystatechange = function() {     if( oRequest.readyState == 4 ) {         if( oRequest.status == 200 ) {             txt.innerText = oRequest.responseText;         } else {             txt.innerText = oRequest.status + ': ' + oRequest.statusText;            }          txt.disabled = '';         txt.className = '';          oRequest = null;     } }} 

Edit: The code block seems a little quirky; it won’t let me include the final } unless it’s on the same line as the previous.

Answer 1

You’re setting the onreadystatechange function after you’re sending the request. If it takes a long time (ie if it goes to the server), this will probably work, since there will be a delay before it tries to call the callback.

If the page is cached, though, the browser is probably trying to call onreadystatechange immediately in the send method. Move your assignment to onreadystatechange to before the open/send code.