CODEWITHSUNDEEP
ajaxjquery
user1700184
user1700184

Reputation: 1661

jQuery ajax() Call Failing

I am writing a web-based application that makes a call to server to update a particular object in the server, from a REST-ful application.

This is the javascript code that I have written.

var sendUrl = url + "v1/items/" + itmId;
$.ajax({
    "type": "PUT",
    "url": sendUrl,
    //"data": {"name": nameVal, "description": descVal},
    "success": function() {
        alert('hai');  //refreshItems();
    },
    "complete": function (jqXHR, textStatus) {
        alert (textStatus);
    }
});

When this code is executed, the server did not receive any request. The browser did not show any update.

I am using Google Chrome as my browser. So, I looked into Chrome's Javascript Console, the console showed this error:

Error from Chrome's Console

Are there any possible solutions to this problem?

Edit:

As suggested in one of the comments, I tried looking into Network Panel. It seems it is not making a call to Server.

This is the screenshot of this particular request: enter image description here

The image is very small. The status is "(failed)" and Type is Pending

If Server does not have PUT configured, it would result in an Internal Server Error. So, that is not happening here.

Edit

After trying the suggestion given in the answer,

This is the code:

var sendUrl = url + "v1/items/" + itmId;
$.ajax({
    "type": "PUT",
    "url": sendUrl,
    //"data": {"name": nameVal, "description": descVal},
    }).done(function ( ) {
        alert('OK');
    }).fail(function ( jqXHR, textStatus, errorThrown ) {
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    });

Here are the objects that has been logged:

enter image description here

Upvotes: 4

Views: 16642

Answers (1)

Tivie
Tivie

Reputation: 18923

Docs for jquery Ajax function W3 specs regarding http/1.1 status codes

First, as stated in the jQuery documentation

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Also, the fail function accepts the following parameters:

jqXHR, textStatus, errorThrown

Since you're getting an error try the following code:

var sendUrl = url + "v1/items/" + itmId;
$.ajax({
    "type": "PUT",
    "url": sendUrl,
    //"data": {"name": nameVal, "description": descVal},

}).done(function ( ) {
    alert('OK');

}).fail(function ( jqXHR, textStatus, errorThrown ) {
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);
});

This should output to the console usefull information about why the ajax call is not working.

If your webservice is working correctly, it should return a http status code. Here are some common response codes:

200 OK -> Everything is ok (it worked)
201 Created -> Ok too

400 Bad Request
401 Unauthorized
404 Not found

So, basically, the response you get should reflect why it's not working

Upvotes: 7

Related Questions