Question

I have a form currently has 2 drop downs. Selecting an option from the first drop down populates the second drop down.

This works fine. I just noticed though that when I add a new item to the second dropdown that It will enter it in the database fine but it will not show up in the drop down menu in Internet Explorer. However if I completely close the browser and reopen it they new entry will show up. It almost seems like a cache type error. It works fine in all other browsers.

The code I am using is

function populateSubCategory() {

   $.getJSON('../inc_selectlogic.php', {category_id:$('#category_id').val()}, function(data) {

    var select = $('#sub_category_id');
    var options = select.attr('options');
    $('option', select).remove();
    $("#sub_category_id").append('<option value="">CATEGORY</option>');
    $.each(data, function(index, array) {
        $("#sub_category_id").append('<option value='+array['sub_category_id']+'>'+ array['sub_category_name'] +'</option>');

    });

});

}

The PHP is calls is

$dsn = "HIDDEN";
$username = "HIDDEN";
$password = "HIDDEN";

$pdo = new PDO($dsn, $username, $password);

$rows = array();
if(isset($_GET['category_id'])) {
    $stmt = $pdo->prepare("SELECT SQL_NO_CACHE sub_category_name, sub_category_id FROM sub_categories WHERE category_id = ?");
    $stmt->execute(array($_GET['category_id']));
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);

Answer 1

You can work around the cache issue by adding a variable to the end of the request url that makes the request unique each time.

var time = new Date().getTime();
$.getJSON('../inc_selectlogic.php?time=' + time, {category_id:$('#category_id').val()}, function(data) {