CODEWITHSUNDEEP
javascriptjqueryajax
John Louderback
John Louderback

Reputation: 99

jQuery AJAX request getting response but no callbacks are fired

I have code as such:

$.ajax({
     method: "GET",
     url: page,
     dataType: 'html',
     data:data,
     success: function(data){
        console.log(data);
     },
     error: function(){
        console.log('error');
     }
 });

Using either Chrome or Firefox's debugger I can see that the request is successful with a response of 200 OK and the response contains the expected data. My problem is, however, that no callbacks fire whatsoever. "Success" does not fire nor does "Error". Furthermore, no deferred methods fire either, such as "done", "then", or "always".

I've been trying to trouble shoot this for the past few hours to no avail. I'm at a total loss. I've also tried using methods such as "$.get" with the same result.

In short, I'm getting the response, but the code in jQuery is not firing any callbacks and all without any visible errors in the console.

Upvotes: 4

Views: 1662

Answers (2)

IndikaM
IndikaM

Reputation: 597

The following code works. Also note that AJAX will not work with cross site scripting. If you want to get the error you can print the "errorThrown"

<script>
    $(document).ready(function () {
        $('#getLink').on("click", function () {
            var url = $("#myUrl");
            alert(url.val());
            $.ajax({

                type: "GET",
                url: url.val(),
                dataType: 'html',
                success: function (data, textStatus, xhr) {
                    $("#data").text(textStatus);
                },
                error: function (data,textStatus, errorThrown){
                    $("#data").text(errorThrown);
                }
            });
        });

    });

</script>

<input id="myUrl" name="myURL" type="text" value="http://localhost:35460/Home/TestPage.cshtml" />
<input type="button" value="getLink" id="getLink">
<span id="data"></span>

Upvotes: 0

jfriend00
jfriend00

Reputation: 707258

One thing I see wrong in your code is that:

method: "GET",

should be:

type: "GET",

I don't see any documented property for method in the jQuery doc. The type property is supposed to default to "GET" so this may not be the only thing wrong here.

In addition, there are cases where the error callback will not be called even if the ajax call fails (in cross-domain requests). From the jQuery doc for the error callback:

This handler is not called for cross-domain script and cross-domain JSONP requests.

This is because jQuery is expecting the server to send back a particular form of javascript and if the server doesn't do what is expected, then jQuery never knows when the request comes back and can't process it.

In these cases, you often have to figure out what might be going wrong from looking at the network trace in the debugger.

Other things to check to make sure you aren't accidentally cross domain:

  • Make sure the domain/subdomain are exactly the same between ajax call and the page. For example, one common mistake is for one to have www. on it and the other not.
  • Make both page and ajax URL are both same http or https.
  • If using a non-standard port number, make sure both page and ajax URL are using the same port.

Upvotes: 1

Related Questions