jQuery AJAX not working using IE

Question

I have seen lots of other people with this problem all over SO and elsewhere but none of the given solutions seem to work for me.

I have a jQuery AJAX call to an ASHX handler. The code works in Firefox and Chrome but not in IE (versions 8, 9 or 10).

It looks like so (simplified):

var val = $(this).val();

$.ajax({
    url: '/Source/Handlers/Search.ashx?q=' + val,
    type: "GET",
    cache: false,
    dataType: 'json',
    error: function(w,t,f) {
         alert(w + "\n" + t + "\n" + f);
    },
    success: function (data) {
         ...
    }
 });

When I run the code in IE the error handler kicks in and says

[object Object]
error
error

Useful huh?

The ASHX handler is like this (again it is simplified):

public class Search : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.ContentType = "application/json";
        context.Response.Buffer = false;

        JavaScriptSerializer serializer = new JavaScriptSerializer();
        List<Suggestions> jsonResponse = new List<Suggestions>();

        // do some stuff

        context.Response.Write(serializer.Serialize(jsonResponse));
    }
}

I have tried swapping "GET" for "POST", I have tried enabling and disabling the "cache" property, I have tried different dataType settings such as "json", "xml" and "text".

Using HTTP Fiddler I can see that the json response does come back but IE doesn't seem to be able to process it.

Any ideas?

EDIT

Here is the JSON response in TextView from HTTP Fiddler:

543
[{"title":"GAMES","results":[{"title":"abcdefg™","link":"http://www.abcdefg.com/en_gb/abcdefg/","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg(1).jpg","total":""},{"title":"abcdefg","link":"http://www.abcdefg.com/en_gb/abcdefg","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg.jpg","total":""},{"title":"abcdefgg","link":"/Retailers/?game=1432&amp;platform=0","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg.jpg?n=9736","total":""},{"title":"abcdefg","link":"http://www.abcdefg.com","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg.jpg","total":""},{"title":"abcdefg","link":"/Retailers/?game=1763&amp;platform=0","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg_promo.jpg","total":""}],"total":"24","link":"/Search/?q=total"},{"title":"MEDIA","results":[{"title":"Videos","link":"/Search/?q=total","image":"","total":"1"},{"title":"Screenshots","link":"/Search/?q=total","image":"","total":"35"}],"total":null,"link":null}]
0

EDIT 2

Hmmm, I updated the $.ajax call to alert w.status and it returned "404". Confused - how can it return 404 in the status when Fiddler shows the response as 200?

Yes if you could tell us what are you getting from the url if you hit that directly in the browser? Is it producing a valid json response? — Jai
– Jai, Commented Mar 27, 2013 at 16:21
+1 to @epascarello. Use console.dir() instead of alert(), and you'll get much more useful information out of w, f and t. — Spudley
– Spudley, Commented Mar 27, 2013 at 16:22

R. Oosterholt · Accepted Answer · 2013-03-27 16:17:47Z

1

I vaguely remember a problem like this. Could you try adding

contentType: "application/json; charset=utf-8"

to the ajax request properties. I think that solved the problems back then.

answered Mar 27, 2013 at 16:17

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spudley Over a year ago

+1. I would have given a similar answer if you hadn't beaten me to it.

rf_wilson Over a year ago

It didn't work for me unfortunately. Thanks for your answer though.

Jai · Accepted Answer · 2013-03-27 16:14:55Z

0

Try adding data : {q : val} and see if this solves the issue:

 var val = $(this).val();

 $.ajax({
    url: '/Source/Handlers/Search.ashx',
    type: "GET",
    data : {q : val},  //<--------send it this way
    cache: false,
    dataType: 'json',
    error: function(w,t,f) {
       alert(w + "\n" + t + "\n" + f);
    },
    success: function (data) {
       ...
    }
 });

answered Mar 27, 2013 at 16:14

Jai

74.8k12 gold badges77 silver badges104 bronze badges

4 Comments

Anthony Grist Over a year ago

Is this just a guess or is there a reason you think IE would be fine with this but struggle with the query string being part of the URL?

Jai Over a year ago

Frankly speaking never faced an issue like this before but yeah i would say this is a guess.

Jai Over a year ago

@rf_wilson if you could tell us what are you getting from the url if you hit that directly in the browser? Is it producing a valid json response?

rf_wilson Over a year ago

See original post above, JSON response added

rf_wilson · Accepted Answer · 2013-03-28 09:04:04Z

After a lot of trial and error I found the problem. When using IE I need to call JSON.parse(data) on the data object that is returned back from my ASHX handler. To do this, use a non-jQuery method of calling Ajax. It has meant that I have two different blocks of Javascript - one for IE and one for other browsers.

if ($.browser.msie) {
    var xhReq = new XMLHttpRequest();
    xhReq.open("GET", "/Source/Handlers/Search.ashx?q=" + val + "&d=" + dateObj.getTime(), false);
    xhReq.send(null);
    AjaxSuccess(xhReq.responseText);
} else {
    $.ajax({
        url: '/Source/Handlers/Search.ashx',
        type: "GET",
        cache: false,
        dataType: 'json',
        data: { q: val },
        contentType: "application/json;",
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        },
        success: function (data) {
            ...
        }
    });
 }

 function AjaxSuccess(data) {
     data = JSON.parse(data);
     ...
 }

Strangely, the JSON.parse() method throws an "unexpected character" error in Firebug.

Bahman Rashidi · Accepted Answer · 2020-05-17 10:57:37Z

0

Maybe there is a problem with encoding. try this

$.ajax({
        type: 'GET',
        url: encodeURI(url ),
        dataType: 'text',
        success: function (data) {
                            result = JSON.parse(JSON.parse(data))
                                                }
       });

answered May 17, 2020 at 10:57

Bahman Rashidi

1061 silver badge5 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX not working using IE

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related