Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery ajax only works in IE when the IE debugger is open

I've faced strange issue with IE (11). I have simple jQuery code:

$("#my-radio").click(function () {
     $.ajax({
        url: "/my-url",
    }).error(function(jqXHR, textStatus, errorThrown) {
        $("#error-summary").text(errorThrown);
    });
});

The thing is that this code works perfectly in all browsers except IE (in my case except IE 11, didn't test in earlier versions yet) BUT, when I open IE built in javascript debugger to see what's wrong - everything starts to works just fine. IE makes ajax call to controller action, breakpoint in controller gets hit. Action returns nothing (it's of type void), just counting some stuff. I've already tried plugin solution provided in this thread but it wasn't useful.

UPDATES:

To demonstrate the issue I've published simple MVC application here. When you click on image, browser makes ajax request to this action:

public string Hello()
{
     string ip = Request.ServerVariables["REMOTE_ADDR"];
     string agent = Request.UserAgent;    

     var request = new Request
     {
          IP = ip,
          Time = DateTime.UtcNow,
          UserAgent = agent
     };

     _requestsRepository.Add(request);

     int byIp = _requestsRepository.GetTotalRequestsCountByUser(ip);
     int total = _requestsRepository.TotalRequests;

     string message = string.Format("Hello, {0}. This is your {1}th request and {2}th request in total.", ip, byIp, total);

     return message;
 }

with this jQuery code:

$(document).ready(function () {
    $("#click-me").click(function () {
        $.ajax({
            url: "/services/hello",
        })

        .success(function (data) {
            alert(data);
        })

        .error(function (jqXHR, textStatus, errorThrown) {
            $("#error-summary").text(errorThrown);
        });
    });
});

As you can see - action returns simple string which is alerted on success. You can try this page in IE. You will notice that the amount of requests doesn't grow, because NO request is actually sent but still success event handler is called and message is alerted (this is probably some old cached message after some possibly one successful request, I'm not sure). In any other browser the amount of requests will grow, because they are sent each time you click the image. If you turn on IE debugger - requests will be sent too. I suggest this is some kind of IE cache related issue.

like image 753
Dmytro Avatar asked Nov 17 '14 12:11

Dmytro


1 Answers

It sounds like you may be getting cached responses. The developer tools may have the Always Refresh from Server option enabled, causing you to only get a fresh response when the tools themselves are opened.

Try adding the cache option in the jQuery AJAX options object, and set its value to false.

like image 110
Sampson Avatar answered Sep 20 '22 02:09

Sampson