Internet Explorer and JQuery/AJAX $.get() not working

Question

I am trying to get IE8 (and other IEs) to work with a page that uses the JQuery/AJAX $.get() method to display a value from an external php file. Firefox, Chrome and Safari all work fine. I've boiled my big problem down to this small example

Here's the javascript code:

function get_number () {
    $.get(
        "test5.php",
        {},
        function (response) {
             var number = (response.number);
             $("#number_display").html(number);
        },
        "json"
    )
}

$(document).ready(function(){
    $('#get').click(function(){
       get_number ();
    });
})

and it inserts into the following html element:

<body style='text-align:center;'>
<p>Number = <span id='number_display'></span></p>
<button id='get'>Get Number</button>

Here is the external php code:

$num = rand (1,10);
$result = array();
$result['number'] = $num;
echo json_encode($result);

My jquery library sourse is http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js, if that matters.

Thanks so much in advance for your help!

I should have included the behavior: The other browsers allow me to click the button over and over and display a number each time. IE only allows one click and then stays stuck on that result. — Jeff 131313

Andrew Whitaker Andrew Whitaker · Accepted Answer · 2012-02-01T00:46:47

You're missing two semicolons, which IE will choke on. I've also formatted your code and made a few other tweaks:

function get_number() {
    // Append a "random" number to the query string to prevent caching:
    $.get("test5.php", { num: Math.random() }, function(response) { 
    // If you don't want to pass any data, you can omit the "data" parameter
        var number = response.number;
        $("#number_display").html(number);
    }, "json"); // <--- 
}

$(document).ready(function() {
    $('#get').click(function() {
        get_number();
    });
}); // <---

Edit: After your comment, you most likely have a caching issue--IE can be aggressive in caching GET requests. To get around this you could append a parameter to your request that will force IE to hit the server again.

Internet Explorer and JQuery/AJAX $.get() not working

2 Answers