Databases
StackOverflow2013
Postsdbo
POWhy won't my AJAX function correctly populate a drop-down list in Internet Explorer?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy won't my AJAX function correctly populate a drop-down list in Internet Explorer?
    primarykey
    data
    text
    <p>I am writing a page with PHP, and I am trying to populate a drop-down list given the value of a previous drop-down list. This works perfectly in Firefox, but does not work at all in Internet Explorer. I was wondering if it is a fluke that it works in Firefox and not IE, or if I am just WAY off in the way I am doing this. Here is what I have:</p> <p>Main Page:</p> <pre><code>&lt;select id="make" name="make" onChange="carCompanyListHandler(this.value);"&gt; &lt;option selected disabled&gt;Choose Make&lt;/option&gt; &lt;optgroup label="American Cars"&gt; &lt;option value="chevrolet"&gt;Chevrolet&lt;/option&gt; &lt;option value="dodge"&gt;Dodge&lt;/option&gt; &lt;option value="ford"&gt;Ford&lt;/option&gt; &lt;option value="jeep"&gt;Jeep&lt;/option&gt; &lt;option value="tesla"&gt;Tesla&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="UK Car Companies"&gt; &lt;option value="astonmartin"&gt;Aston Martin&lt;/option&gt; &lt;option value="bentley"&gt;Bentley&lt;/option&gt; &lt;option value="landrover"&gt;Land Rover&lt;/option&gt; &lt;option value="lotus"&gt;Lotus&lt;/option&gt; &lt;option value="morgan"&gt;Morgan&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Japanese Cars"&gt; &lt;option value="acura"&gt;Acura&lt;/option&gt; &lt;option value="mazda"&gt;Mazda&lt;/option&gt; &lt;option value="nissan"&gt;Nissan&lt;/option&gt; &lt;option value="subaru"&gt;Subaru&lt;/option&gt; &lt;option value="toyota"&gt;Toyota&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Italian Cars"&gt; &lt;option value="alfaromeo"&gt;Alfa Romeo&lt;/option&gt; &lt;option value="ferrari"&gt;Ferrari&lt;/option&gt; &lt;option value="fiat"&gt;Fiat&lt;/option&gt; &lt;option value="lamborghini"&gt;Lamborghini&lt;/option&gt; &lt;option value="maserati"&gt;Maserati&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="German Cars"&gt; &lt;option value="audi"&gt;Audi&lt;/option&gt; &lt;option value="bmw"&gt;BMW&lt;/option&gt; &lt;option value="goliath"&gt;Goliath&lt;/option&gt; &lt;option value="porche"&gt;Porche&lt;/option&gt; &lt;option value="volkswagen"&gt;Volkswagen&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt; </code></pre> <p>JavaScript:</p> <pre><code>function carCompanyListHandler(carCompany){ xmlHttp = GetXmlHttpObject(); if (xmlHttp == null){ alert ("Browser does not support HTTP Request"); return; } var url = "./ajaxprocessor.php?carCompany=" + carCompany; url = url + "&amp;sid=" + Math.random(); console.log(url); xmlHttp.onreadystatechange = populateModels; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function populateModels(){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){ var selectList = document.getElementById('model'); var selectListOptions = xmlHttp.responseText; console.log(selectListOptions); selectList.innerHTML = selectListOptions; return; } } </code></pre> <p>The Back-End PHP:</p> <pre><code>&lt;?php $carCompany = (isset($_GET['carCompany']) &amp;&amp; $_GET['carCompany'] != "") ? $_GET['carCompany'] : null; $returnValue = null; error_log("The car company chosen was: " . $carCompany); switch($carCompany){ case "chevrolet": $returnValue = "&lt;option value=\"camaro\"&gt;Camaro&lt;/option&gt;\n&lt;option value=\"corvette\"&gt;Corvette&lt;/option&gt;\n&lt;option value=\"lumina\"&gt;Lumina&lt;/option&gt;\n&lt;option value=\"silverado\"&gt;Silverado&lt;/option&gt;\n&lt;option value=\"volt\"&gt;Volt&lt;/option&gt;\n"; break; case "dodge": $returnValue = "&lt;option value=\"avenger\"&gt;Avenger&lt;/option&gt;\n&lt;option value=\"challenger\"&gt;Challenger&lt;/option&gt;\n&lt;option value=\"charger\"&gt;Charger&lt;/option&gt;\n&lt;option value=\"dakota\"&gt;Dakota&lt;/option&gt;\n&lt;option value=\"ramcharger\"&gt;Ramcharger&lt;/option&gt;\n"; break; case "ford": $returnValue = "&lt;option value=\"fiesta\"&gt;Fiesta&lt;/option&gt;\n&lt;option value=\"focus\"&gt;Focus&lt;/option&gt;\n&lt;option value=\"taurus\"&gt;Taurus&lt;/option&gt;\n&lt;option value=\"explorer\"&gt;Explorer&lt;/option&gt;\n&lt;option value=\"f150\"&gt;F-150&lt;/option&gt;\n"; break; case "jeep": $returnValue = "&lt;option value=\"compass\"&gt;Compass&lt;/option&gt;\n&lt;option value=\"cherokee\"&gt;Cherokee&lt;/option&gt;\n&lt;option value=\"patriot\"&gt;Patriot&lt;/option&gt;\n&lt;option value=\"wrangler\"&gt;Wrangler&lt;/option&gt;\n&lt;option value=\"srt8\"&gt;SRT8&lt;/option&gt;\n"; break; case "tesla": $returnValue = "&lt;option value=\"teslaroadster\"&gt;Tesla Roadster&lt;/option&gt;\n&lt;option value=\"models\"&gt;Model S&lt;/option&gt;\n&lt;option value=\"modelx\"&gt;Model X&lt;/option&gt;\n"; break; case "astonmartin": $returnValue = "&lt;option value=\"v8vantage\"&gt;V8 Vantage&lt;/option&gt;\n&lt;option value=\"db9volante\"&gt;DB9 Volante&lt;/option&gt;\n&lt;option value=\"rapide\"&gt;Rapide&lt;/option&gt;\n&lt;option value=\"astonmartinv12zagato\"&gt;Aston Martin V12 Zagato&lt;/option&gt;\n&lt;option value=\"cygnet\"&gt;Cygnet&lt;/option&gt;\n"; break; case "bentley": $returnValue = "&lt;option value=\"mulsanne\"&gt;Mulsanne&lt;/option&gt;\n&lt;option value=\"flyingspur\"&gt;Flying Spur&lt;/option&gt;\n&lt;option value=\"continentalgt\"&gt;Continental GT&lt;/option&gt;\n&lt;option value=\"continentalgtc\"&gt;Continental GTC&lt;/option&gt;\n"; break; case "landrover": $returnValue = "&lt;option value=\"defender\"&gt;Defender&lt;/option&gt;\n&lt;option value=\"freelander\"&gt;Freelander&lt;/option&gt;\n&lt;option value=\"discovery\"&gt;Discovery&lt;/option&gt;\n&lt;option value=\"rangerover\"&gt;Range Rover&lt;/option&gt;\n"; break; case "lotus": $returnValue = "&lt;option value=\"elise\"&gt;Elise&lt;/option&gt;\n&lt;option value=\"exige\"&gt;Exige&lt;/option&gt;\n&lt;option value=\"evora\"&gt;Evora&lt;/option&gt;\n&lt;option value=\"2eleven\"&gt;2-Eleven&lt;/option&gt;\n"; break; case "morgan": $returnValue = "&lt;option value=\"evagt\"&gt;Eva GT&lt;/option&gt;\n&lt;option value=\"pluse\"&gt;Plus E&lt;/option&gt;\n&lt;option value=\"anniversdary4x4\"&gt;Anniversdary 4x4&lt;/option&gt;\n&lt;option value=\"aeroplus\"&gt;Aero Plus&lt;/option&gt;\n&lt;option value=\"roadster\"&gt;Roadster&lt;/option&gt;\n"; break; case "acura": $returnValue = "&lt;option value=\"ilx\"&gt;ILX&lt;/option&gt;\n&lt;option value=\"MDX\"&gt;MDX&lt;/option&gt;\n&lt;option value=\"rdx\"&gt;RDX&lt;/option&gt;\n&lt;option value=\"tsx\"&gt;TSX&lt;/option&gt;\n&lt;option value=\"zdx\"&gt;ZDX&lt;/option&gt;\n"; break; case "mazda": $returnValue = "&lt;option value=\"mazda2\"&gt;Mazda 2&lt;/option&gt;\n&lt;option value=\"mazda3\"&gt;Mazda 3&lt;/option&gt;\n&lt;option value=\"mazda6\"&gt;Mazda 6&lt;/option&gt;\n&lt;option value=\"mx5\"&gt;MX-5&lt;/option&gt;\n&lt;option value=\"cx5\"&gt;CX-5&lt;/option&gt;\n"; break; case "nissan": $returnValue = "&lt;option value=\"leaf\"&gt;Leaf&lt;/option&gt;\n&lt;option value=\"sentra\"&gt;Sentra&lt;/option&gt;\n&lt;option value=\"altima\"&gt;Altima&lt;/option&gt;\n&lt;option value=\"cube\"&gt;Cube&lt;/option&gt;\n&lt;option value=\"titan\"&gt;Titan&lt;/option&gt;\n"; break; case "subaru": $returnValue = "&lt;option value=\"brz\"&gt;BRZ&lt;/option&gt;\n&lt;option value=\"exiga\"&gt;Exiga&lt;/option&gt;\n&lt;option value=\"forester\"&gt;Forester&lt;/option&gt;\n&lt;option value=\"outback\"&gt;Outback&lt;/option&gt;\n&lt;option value=\"stella\"&gt;Stella&lt;/option&gt;\n"; break; case "toyota": $returnValue = "&lt;option value=\"corolla\"&gt;Corolla&lt;/option&gt;\n&lt;option value=\"camry\"&gt;Camry&lt;/option&gt;\n&lt;option value=\"tacoma\"&gt;Tacoma&lt;/option&gt;\n&lt;option value=\"tundra\"&gt;Tundra&lt;/option&gt;\n&lt;option value=\"4runner\"&gt;4Runner&lt;/option&gt;\n"; break; case "alfaromeo": $returnValue = "&lt;option value=\"4c\"&gt;4C&lt;/option&gt;\n&lt;option value=\"mito\"&gt;Mito&lt;/option&gt;\n&lt;option value=\"giulietta\"&gt;Giulietta&lt;/option&gt;\n&lt;option value=\"159\"&gt;159&lt;/option&gt;\n&lt;option value=\"quadrifoglio\"&gt;Quadrifoglio&lt;/option&gt;\n"; break; case "ferrari": $returnValue = "&lt;option value=\"california\"&gt;California&lt;/option&gt;\n&lt;option value=\"458italia\"&gt;458 Italia&lt;/option&gt;\n&lt;option value=\"458spider\"&gt;458 Spider&lt;/option&gt;\n&lt;option value=\"f12berlinetta\"&gt;F12 Berlinetta&lt;/option&gt;\n&lt;option value=\"laferrari\"&gt;La Ferrari&lt;/option&gt;\n"; break; case "fiat": $returnValue = "&lt;option value=\"punto\"&gt;Punto&lt;/option&gt;\n&lt;option value=\"panda\"&gt;Panda&lt;/option&gt;\n&lt;option value=\"500\"&gt;500&lt;/option&gt;\n&lt;option value=\"albea\"&gt;Albea&lt;/option&gt;\n&lt;option value=\"bravo\"&gt;Bravo&lt;/option&gt;\n"; break; case "lamborghini": $returnValue = "&lt;option value=\"miura\"&gt;Miura&lt;/option&gt;\n&lt;option value=\"espada\"&gt;Espada&lt;/option&gt;\n&lt;option value=\"jarama\"&gt;Jarama&lt;/option&gt;\n&lt;option value=\"countach\"&gt;Countach&lt;/option&gt;\n&lt;option value=\"silhouette\"&gt;Silhouette&lt;/option&gt;\n"; break; case "maserati": $returnValue = "&lt;option value=\"quattroporte\"&gt;Quattroporte&lt;/option&gt;\n&lt;option value=\"ghibli\"&gt;Ghibli&lt;/option&gt;\n&lt;option value=\"granturismo\"&gt;Gran Turismo&lt;/option&gt;\n&lt;option value=\"grancabrio\"&gt;Gran Cabrio&lt;/option&gt;\n&lt;option value=\"levante\"&gt;Levante&lt;/option&gt;\n"; break; case "audi": $returnValue = "&lt;option value=\"a1\"&gt;A1&lt;/option&gt;\n&lt;option value=\"a8\"&gt;A8&lt;/option&gt;\n&lt;option value=\"s3\"&gt;S3&lt;/option&gt;\n&lt;option value=\"q5\"&gt;Q5&lt;/option&gt;\n&lt;option value=\"ttrs\"&gt;TT RS&lt;/option&gt;\n"; break; case "bmw": $returnValue = "&lt;option value=\"1series\"&gt;1 Series&lt;/option&gt;\n&lt;option value=\"3series\"&gt;3series&lt;/option&gt;\n&lt;option value=\"5series\"&gt;5 Series&lt;/option&gt;\n&lt;option value=\"i3\"&gt;i3&lt;/option&gt;\n&lt;option value=\"x3\"&gt;X3&lt;/option&gt;\n"; break; case "goliath": $returnValue = "&lt;option value=\"gp700\"&gt;GP 700&lt;/option&gt;\n&lt;option value=\"gp900\"&gt;GP 900&lt;/option&gt;\n&lt;option value=\"dreirad\"&gt;Dreirad&lt;/option&gt;\n&lt;option value=\"gv800\"&gt;GV 800&lt;/option&gt;\n&lt;option value=\"express\"&gt;Express&lt;/option&gt;\n"; break; case "porche": $returnValue = "&lt;option value=\"911\"&gt;911&lt;/option&gt;\n&lt;option value=\"boxter\"&gt;Boxter&lt;/option&gt;\n&lt;option value=\"carrera\"&gt;Carrera&lt;/option&gt;\n&lt;option value=\"cayenne\"&gt;Cayenne&lt;/option&gt;\n&lt;option value=\"macan\"&gt;Macan&lt;/option&gt;\n"; break; case "volkswagen": $returnValue = "&lt;option value=\"newbeetle\"&gt;New Beetle&lt;/option&gt;\n&lt;option value=\"jetta\"&gt;Jetta&lt;/option&gt;\n&lt;option value=\"passat\"&gt;Passat&lt;/option&gt;\n&lt;option value=\"touareg\"&gt;Touareg&lt;/option&gt;\n&lt;option value=\"phaeton\"&gt;Phaeton&lt;/option&gt;\n"; break; default: $returnValue = "&lt;option selected disabled&gt;Choose make&lt;/option&gt;\n"; } error_log("Here is the list of models: " . $returnValue); echo $returnValue; ?&gt; </code></pre> <p>Like I said, this works fantastically in Firefox, but not at all in IE. Any input (positive or negative) would be greatly appreciated. Also, I cannot use jQuery.</p> <p>= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =</p> <p>EDIT</p> <p>= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =</p> <p>As a follow-up to this post, I applied the suggested technique of using json_encode on the PHP side and JSON.parse on the JavaScript side. This does, indeed, work using Internet Explorer; however, with database calls that return thousands of hits, it really slows down the browser ... A LOT! Here is what I am working with now, using a list of FEMA disasters I got from the data.gov website:</p> <p>JavaScript:</p> <pre><code>function filtered(){ var tableBody = document.getElementById('tableToPopulate'); if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){ var listOfDisasters = xmlHttp.responseText; var j = 0; for(var i=0; i&lt;JSON.parse(listOfDisasters).length; i++){ var disaster = JSON.parse(listOfDisasters)[i]; var newRow = document.createElement("tr"); for(var index in disaster){ var newCell = document.createElement("td"); var node = document.createTextNode(disaster[index]); newCell.appendChild(node); newRow.appendChild(newCell); } tableBody.appendChild(newRow); j++; } } } </code></pre> <p>The Back-End PHP:</p> <pre><code>&lt;?php $filter = (isset($_GET['filter']) &amp;&amp; $_GET['filter'] != '') ? strip_tags($_GET['filter']) : null; $filterCriteria = (isset($_GET['filterCriteria']) &amp;&amp; $_GET['filterCriteria'] != '') ? strip_tags($_GET['filterCriteria']) : null; $returnValue = null; $arrayOfResults = array(); $query = "select fd.ID,fd.DisasterNumber,fd.DeclarationDate,i.IncidentType,s.State,fd.County,fd.ApplicantName,fd.EducationApplicant,fd.NumberOfProjects,fd.FederalShareObligated from DISASTERS fd join INCIDENTTYPE i on i.ID = fd.IncidentTypeID join STATE s on s.ID = fd.StateID where " . $filter . " like '%" . $filterCriteria . "%' order by State,County,IncidentType"; error_log("Filter Query: " . $query); if($result = $dbConnection-&gt;query($query)){ while($row = $result-&gt;fetch_object()){ $tmpArray = array(); $tmpArray['DisasterNumber'] = $row-&gt;DisasterNumber; $tmpArray['DeclarationDate'] = $row-&gt;DeclarationDate; $tmpArray['IncidentType'] = $row-&gt;IncidentType; $tmpArray['State'] = $row-&gt;State; $tmpArray['County'] = $row-&gt;County; $tmpArray['ApplicantName'] = $row-&gt;ApplicantName; $tmpArray['EducationApplicant'] = $row-&gt;EducationApplicant; $tmpArray['NumberOfProjects'] = $row-&gt;NumberOfProjects; $tmpArray['FederalShareObligated'] = $row-&gt;FederalShareObligated; array_push($arrayOfResults, $tmpArray); } $result-&gt;close(); } $returnValue = json_encode($arrayOfResults); error_log($returnValue); echo $returnValue; ?&gt; </code></pre> <p>The data file I got from data.gov is over 131K lines, so some of the database queries can return a few thousand lines. I know this is a lot, but the innerHTML method does work faster than does the DOM method. Maybe there is a more efficient way to do this. If so, I would appreciate any input on the matter.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBrian
    1. USBrian
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhich version of _IE_ ? Do you get any error messages in the _console_ ?
      singulars
      1. POWhy won't my AJAX function correctly populate a drop-down list in Internet Explorer?
      1. USPaul S.
    2. CO`console.log` doesn't work in IE unless the console is open. Therefore only use `console.log` when you are testing.
      singulars
      1. POWhy won't my AJAX function correctly populate a drop-down list in Internet Explorer?
      1. USCasper André Casse
    3. COIE 8 ... no errors, it just doesn't work. It looks like it almost works, in that I get, what looks like, and empty drop-down list.
      singulars
      1. POWhy won't my AJAX function correctly populate a drop-down list in Internet Explorer?
      1. USBrian
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload