Question

I am working on a fairly simple demo app. Three input dropdown boxes are displayed using slideDown() in succession (this fires on a change() of the previous dropdown), and one uses an AJAX request to determine the next one’s values.

This works flawlessly in Chrome and Firefox, but IE (even 9) chokes on the second dropdown- the one that executes the AJAX request.

Because code speaks louder than words:

$('#specialty').change(function() {
    if ( $(this).val() !== "(please select an option)" ) {
        $.ajax({
                type: "GET",
                url: "getValidToppings.php",
                data: { location: $(this).parent().prev().children('select').val() }
        }).done(function(data) {
            var mytoppings, toppingsSelectBox;

            console.log('return values: ' + data);

            data = $.parseJSON(data);

            toppingsSelectBox = $('#toppings');
            toppingsSelectBox.empty();

            // we use the value from the select box as a key in the dict of toppings returned
            // from the AJAX call
            mytoppings = data[$('#specialty').val()];

            toppingsSelectBox.append('<option>(please select an option)</option>')

            for (i in mytoppings) {
                toppingsSelectBox.append("<option>"+mytoppings[i]+"</option>");
            }

            toppingsSelectBox.parent().slideDown('slow', 'linear');
        });
    }
});

You can see that when I change this dropdown (where id="specialty"), the values returned via AJAX (in JSON) are supposed to fill up the .toppings input, and then reveal it (with slideDown()). But, in IE… no dice.

What’s REALLY WEIRD is, if I boot up IE’s dev tools and start tinkering with Javascript (set breakpoint, use console, etc.), it starts working as anticipated. Even if I only OPEN dev tools, as soon as that window is open it starts working. What the heck?

Something weird is happening here. Any ideas?

Answer 1

IE doesn’t know what “console” is, except when you have the dev tools open. Take out the console.log and you should be good. Also make sure you aren’t missing any semicolons, IE tends to not like that.