CODEWITHSUNDEEP
htmlajaxinternet-explorer-9
Steve
Steve

Reputation: 4898

Can't load Select from Ajax with IE9

I have a select element that I fill with file names using ajax.

The HTML is:

<select id='load_dropdown' name=loads help_token="load_dropdown" title="">  
      <option value='' selected='selected'>LOAD</option>
</select>

The call to fill the element is:

 $('select#load_dropdown')  .load('getFiles.php', {list : 'LOAD'}); //fill the load drop down list

getFiles.php: is 

$dir = $_SESSION['user']['id'] . "/xmls/";      // files are in xmls dir
if ($dirHandle = opendir($dir) ){  
}
else {
    echo ("<br />getFiles.php: $dir not found.");
    exit;
}

echo ("<option selected='selected' value=''><b> $list </b> </option>");   // first line of this drop down option
        while (false !== ($fileName = readdir($dirHandle))) {
            if ($fileName == "." || $fileName == "..") {
                continue;
            }
            $fileNames[] = $fileName;       // collect file names
        } 

        sort($fileNames);
        foreach ($fileNames as $fileName) {
            $displayName = basename($fileName, '.xml');     // cut .xml at end
            echo ("<option value='$displayName'>" . $displayName . "</option>");  
        } 
    }

This works fine for Firefox, Chrome, Safari, and IE10. It doesn't work for IE9.

With IE9 the select element does not fill with the loaded information, though I can see that getFiles.php call is returning the correct data. After the call the select element is

enter image description here

Does anyone know what's going on with IE9?

Thanks.

Upvotes: 0

Views: 500

Answers (2)

onionpsy
onionpsy

Reputation: 1522

What is your jquery version ? I've test this code with 1.9.1 and 1.10.2 :

getFiles.php :

<?php
//$dir = $_SESSION['user']['id'] . "/xmls/";      // files are in xmls dir
$dir = 'xmls/'; // for testing
if ($dirHandle = opendir($dir) ){  
} else {
    echo ("<br />getFiles.php: $dir not found.");
    exit;
}
echo ("<option selected='selected' value=''><b> $list </b> </option>");   // first line of this drop down option
while (false !== ($fileName = readdir($dirHandle))) {
    if ($fileName == "." || $fileName == "..") {
        continue;
    }
    $fileNames[] = $fileName;       // collect file names
} 

sort($fileNames);
foreach ($fileNames as $fileName) {
    $displayName = basename($fileName, '.xml');     // cut .xml at end
    echo ("<option value='$displayName'>" . $displayName . "</option>");  
}

get_files.html

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>

<select id='load_dropdown' name=loads help_token="load_dropdown" title="">  
      <option value='LOAD' selected='selected'>LOAD</option>
</select>

<script>
    $('select#load_dropdown').load('getFiles.php', {list : 'LOAD'}); //fill the load drop down list
</script>

I have created a xmls folder in the root of the project with file1.xml and file2.xml.

It works on IE9 (ver 9.0.8112. update 9.0.24) (same result as other browsers). the listbox contain file1 and file2 : IE9 - load

If you want to see the generated html, you juste have to click the refresh button (in the red square)

Hope it's what you want.

Upvotes: 1

Manolo
Manolo

Reputation: 26370

I had the same issue. The better way is to reference div and span elements:

<div id="select"><select id='load_dropdown' name=loads help_token="load_dropdown" title="">  
  <option value='' selected='selected'>LOAD</option>
</select>
</div>

-

$('#select #load_dropdown')  .load('getFiles.php', {list : 'LOAD'}); //fill the load drop down list

Upvotes: 1

Related Questions