JQuery $.ajax, $.get issues

Question

I have a $(".clickButton").click(function() that loads a page using $.ajax and return the result to a DIV. This works perfectly in Chrome, FireFox and Safari, but not IE11.

$.ajax({
    url: "go.php?ab=1",
        success: function(data, textStatus, xhr) {
        $("#res").html(data);       
   }
});

As a quick test I tried the following and again it works in Chrome, FireFox and Safari but not IE11.

$.get('go.php?ab=1', function( jqXHR, textStatus, errorThrown )
{ alert(jqXHR); });

The date being returned is text and is either OK or ERROR. The go.php is running multiple command line scripts and depending what the variables passed depneds on what runs.

All that part is fine and it works really well in the 3 browsers, but not IE11.

When the page first loads in IE it sort of works, it appears to run the go script and return a result. But any subsequent click return instant and the go.php page isn't called. Results are displayed but they appear to be the first processes return results. It's as if the result and process have been cached.

Any ideas how to make this work in IE as it does in the others ?

Answer 1

It's as if the result and process have been cached.

This is possible. If you are sending multiple GET requests to the same URL your browser may be caching the result. If you wanted to verify this you could click the button, clear your cache without reloading the page, and click the button again to see if it works as expected this time.

To prevent caching of GET requests you can add

cache: false

to your $.ajax options for each request, or you could disable it for all requests by using

$.ajaxSetup({ cache: false });

Answer 2

I dont know if we been to the same problem, but just earlier I was trying to get the responce data from the go.php and add it into a div.

My code goes like this.

onClick:

<script type="text/javascript">
    function gimmeData(){

                    var url = 'go.php';
                    $.ajax({
                    type: "GET",
                    url: url,
                    data:{'something':'1'},
                    success:function(results)
                    {   
                        $('#add_data').html(results);
                    }
                    });
                }
</script>

this will give go.php?something=1 url.

html:

<input type="button" onclick="gimmeData();" value="clickme!" />
<div id="add_data"></div>

button click

$('a').on('click', function(){
    var a = $(this).data('first');
    var b = $(this).data('second');
    alert(a + ":" + b);
});

html:

<a id="button" href="#" data-first="something" data-second="something2" onclick="click();">click me</a>

using data() function. see http://api.jquery.com/data/

or you can do $(this).attr("data-value") to get the value of a data-attribute

JSFiddle sample.