Frobie

I was working through the night last night, burning the midnight oil as they say, trying to get this AJAX deal to work. I had to fill a select field with options once the user selects an option from a second select field. But, every time I made the AJAX call to retrieve the data, the target select field remained empty… in IE. Argh! IE! Why do you haunt me so?!

I put an onChange call on the select field to call the Javascript function when the user selects a field from the dropdown:

<select name="choose" id="choose" onchange="fillData()">

The fillData() function would grab the selected value from the drop down and send it to the getData.php file:

function fillData() {
  var url = "getData.php?x=";
  var len = document.form.choose.length;
 
  for (i = 0; i < len; i++) {
    if (document.form.choose[i].selected) {
      url += document.form.choose[i].value;
    }
  }
  request.open("GET", url, true);
  request.onreadystatechange = updatePage;
  request.send(null);
}

I had the getData.php file return something like this:

<option value="">Target</option>
<option value="1a">Target 1a</option>
<option value="1b">Target 1b</option>

In the updatePage() function, I dropped the response from the getData.php file into the targeted select field:

function updatePage() {
  if (request.readyState == 4)
  if (request.status == 200) {
    document.form.choose.innerHTML = request.responseText;
  } else if (request.status == 404)
    alert("Request URL does not exist");
  else
    alert("Error: status code is " + request.status);
}

The above pieces of code works fine for Firefox; but, for one reason or another, IE refuses to cooperate. I dropped in a couple alert statements in the updatePage() function to see what was happening. The response from the php files had the correct data. After assigning the response to the select field, a piece of the data gets chopped off in IE:

Target</option>
<option value="1a">Target 1a</option>
<option value="1b">Target 1b</option>

After a bit of Google magic, the following solution works for both Firefox and IE. In the php file, I organized the data as a string of option pairs:

Target 1a:1a|Target 1b:1b

In the updatePage() function, I split the string on the | character to create an array of option pairs. Next, I looped through the array and split each pair on the : character to get the option text and option value. With these two values, I created a new Option object and attached it to the end of the Target select object.

function updatepage() {
  if (request.readyState == 4)
  if (request.status == 200) {
    var response = request.responseText.split("|");
    var choose = document.getElementById("choose");
    var targets;    
 
    // set beginning point of select dropdown
    // a length of 1 starts the append after the first option
    choose.options.length = 1;
    for (x=0; x<response.length; x++)
    {
    	targets = response[x].split(":");
        // Option takes two parameters: option text,option value
    	choose.options[choose.options.length] 
           = new Option(targets[0],targets[1]);
    }
  } else if (request.status == 404)
    alert("Request URL does not exist");
  else
    alert("Error: status code is " + request.status);
}

The result was perfect for what I needed and it worked in both Firefox and IE. I checked the page during a break at work and it worked fine in Opera and Safari too. w00t!

Trackback URI | Comments RSS