Why won't this jQuery ajax call work in chrome

Question

I cannot get this $.ajax function to work in Chrome. When I make the ajax request, a response is never returned. When I view this in Chrome dev tools, it states that the json request is still pending. So far, I have found suggestions to add these parameters to the options.

'{type: "post", data: '', cache: false, async: false}'

However, none of these options made it work.

        try {
            var o = {username: 'adobeedge', count: 4};
            var twitterUrl = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + o.username + '&count=' + o.count;

            $("body").append('<p>attempting ajax</p>');

            $.ajax({url: twitterUrl,
                dataType: 'jsonp',
                type: "post",
                data: '',
                cache: false,
                async: false,
            })
                    .success(function(data) {

                    $.each(data, function(index, item) {
                        $("body").append(item.text);
                    });
                }) ;
        }
        catch (error) {
            alert("Error: " + error.toString());
        }

Have you looked at the request / response in the dev tools to see what might be going on? Are there any errors in the console? — Jay Blanchard, Dec 05 '12 at 13:58
Can you be more specific than "doesn't work"? Does it fail or are you getting results you don't expect? Any error messages or HTTP codes? — Tim Croydon, Dec 05 '12 at 14:02
Works good for me... Check this http://jsfiddle.net/vLYmY/3/ — Dusan Kasan, Dec 05 '12 at 14:08
When I look at the request / response in the dev tools, it shows the json call and says it is "pending". — user1214959, Dec 05 '12 at 14:15
When I say it dosen't work, what I mean is that the json objects are never retrieved. Dusan, Did you load the jsfiddle.net site in a browser other than chrome? Your link does show it working when I load it in Firfox, but not in Chrome. — user1214959, Dec 05 '12 at 14:17

score 1 · Answer 1 · answered Dec 05 '12 at 14:51

Following code works fine in my case

My chrome Version : 23.0.1271.95 m

try {
        var o = {username: 'adobeedge', count: 4};
        var twitterUrl = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + o.username + '&count=' + o.count;

        $("body").append('<p>attempting ajax</p>');

        $.ajax({url: twitterUrl,
            dataType: 'jsonp',
            type: "post",
            data: '',
            cache: false,
            async: false,
        })
                .success(function(data) {

                $.each(data, function(index, item) {
                    $("body").append(item.text);
                });
            }) ;
    }
    catch (error) {
        alert("Error: " + error.toString());
    }

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

I don't know if this will be of any help, but I've never seen the success function attached on the outside of the ajax call. All the jQuery ajax documentation I've looked at shows the ".done" attached to the end. However, I've only seen success defined as an option inside the actual ajax call itself. You could try rewriting it as follows:

$.ajax({
    url: twitterUrl,
    dataType: 'jsonp',
    type: "post",
    data: '',
    cache: false,
    async: false,
    success: function(data) {
        $.each(data, function(index, item) {
            $("body").append(item.text);
        });
    }
});

See if this helps. There is also another Stack Overflow Article that may be of some help to you as well. This article describes the different uses of "success:" vs. ".done". For more information on the .ajax documentation visit the jQuery API documentation for .ajax.

Hope this helps.

edited May 23 '17 at 12:27

Community

1
1

answered Dec 05 '12 at 14:08

War10ck

12,387
7
41
54

I have already tried that. the .success attached to the outside of the call when jQuery implemented something called jqXHR. – user1214959 Dec 05 '12 at 14:11
I just found some documentation on that as well. Be mindful that the callbacks such as .success, .error, etc. associated with this jqXHR object are deprecated as of version jQuery 1.8. You should use the .done() and .fail() in its place. – War10ck Dec 05 '12 at 14:16
When I change success to done, the ajax call neither works in chrome, or firefox. – user1214959 Dec 05 '12 at 14:24

score 0 · Answer 3 · answered Dec 05 '12 at 14:17

0

jsonp does not support synchronous calls. Try async: true.

I'm not able to try it as I work in an office where twitter is blocked.

answered Dec 05 '12 at 14:17

droidbot

937
1
10
26

score 0 · Answer 4 · answered Apr 04 '13 at 23:42

I battled with this issue today on a fully patched Chrome on OSX 10.8.2, with the exact symptoms you describe. This was the only mention of my problem I could find through Google.

Turns out it was being caused by a privacy-focused extension called Disconnect.

Try disabling extensions to see if that fixes the issue. Hope this helps.

Why won't this jQuery ajax call work in chrome

4 Answers4