Jquery: $ajax - error function called even on a successful request

Question

I am sending an ajax request to an API (the instapaper one) and I have been able to make successful requests, i.e. I have postsed links to instapaper successfully and received the correct status code - 201. However, the error callback function is called instead of the success one. I think this is because of the way that I have setup my request. E.g. it's is expecting the response in a different format.

The request function:

$("#instapaper").click(function() {
    $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url:'http://www.instapaper.com/api/add',
        data: {"url": ref , "username": "<%= current_user.instapaper_user %>", "password": "<%= current_user.instapaper_pass %>" },
        context: document.body,
        error: function() { 
          alert('There was an error!');
        },
        success: function() {
          alert('Page sent');
        },
      })
    });

I have tried using the status code callback for code 201, but that does not work either. Any help appreciated.

Answer 1

It looks like the instapaper API takes jsonp as callback function name, but default in jQuery is callback.

I suggest you add jsonp: 'jsonp' to your ajax object and see if it works:

$.ajax({
    type: 'GET',
    dataType: 'jsonp',
    url:'http://www.instapaper.com/api/add',
    data: {"url": ref , "username": "<%= current_user.instapaper_user %>", "password": "<%= current_user.instapaper_pass %>" },
    context: document.body,
    error: function() { 
      alert('There was an error!');
    },
    success: function() {
      alert('Page sent');
    },
    jsonp: 'jsonp'
});