I have a nearly impossible-to-debug problem that I've been unable to track down, but that appears to be an issue with IE8, the jQuery Chosen plugin, and some Ajax code I wrote to query the database and return a "cascading" dropdown menu via HTML and replace the original dropdown with the new one.
I was never able to make any of the plugin solutions offered for dropdown menus work, so I wrote my own, narrowly tailored to my purposes:
In controllers/main.php:
public function ajax_getlist() {
$fields = $this->input->get_post('fields');
$table = $this->input->get_post('table');
$where = $this->input->get_post('where');
$selectedid = $this->input->get_post('selectedid');
$this->load->model('database_model');
echo json_encode($this->database_model->getListOptions($fields, $table, $where, $selectedid));
}
In models/database_model:
public function getListOptions($fields, $table, $where, $selectedid) {
// $fields has format array('label' => label, 'id' => ID)
// $where has format array('field' => field, 'value' => value)
$query = $this->_query($fields, $table, $where);
if ($query->num_rows()) {
$result = "<select id=\'field-$fields[label]\' name=\'$fields[label]\' class=\'chosen-select\' data-placeholder=\'Choose a $fields[label]\'>";
foreach($query->result_array() as $options) {
$selected = ($selectedid == $options[$fields['label']]) ? " selected=\'selected\'" : "";
$result .= "<option$selected>" . $options[$fields['label']] . "</option>";
}
$result .= "</select>";
return $result;
} else {
return false;
}
}
private function _query($field, $table, $where = false) {
if (is_array($field)) {
$this->db->select(implode(",", $field));
} else {
$this->db->select($field);
}
$this->db->order_by("ID");
$this->db->from($table);
if ($where) {
$this->db->where($where['field'], $where['value']);
}
return $this->db->get();
}
And then, in the footer of my view:
$.ajax(
"<?= site_url('main/ajax_getlist') ?>",
{
type: 'GET',
data: {
"fields": {
"label": "JobTitles",
"id": "ID"
},
"table": "jobtitlesdescriptions",
"where": {
"field": "Dept",
"value": $("select#field-Dept").val()
},
"selectedid": $("select#field-JobTitles").val()
},
success: function(data) {
data = data.replace(/\\/g, '');
$("select#field-JobTitles").chosen().html(data);
$("select#field-JobTitles").trigger("liszt:updated");
}
}
);
$("select#field-Dept").chosen().on('change', function() {
$.ajax(
"<?= site_url('main/ajax_getlist') ?>",
{
type: 'GET',
data: {
"fields": {
"label": "JobTitles",
"id": "ID"
},
"table": "jobtitlesdescriptions",
"where": {
"field": "Dept",
"value": $("select#field-Dept").val()
},
"selectedid": $("select#field-Dept").val()
},
success: function(data) {
data = data.replace(/\\/g, '');
$("select#field-JobTitles").chosen().html(data);
$("select#field-JobTitles").trigger("liszt:updated");
}
}
);
});
This works fantastic in modern browsers (Chrome, Firefox, Safari, IE10). However, it does not work in IE 8. The list is never populated, and it looks like the attached image.
Any thoughts? Has anyone else had a problem like this?
