Jquery Ajax fails

Question

Console shows 200 Image I cant seem to understand why this Ajax query is failing, opening the console and viewing network I see that there is a response of 200 and the preview tab on my browser shows the data I expect, but in the complete callback I get the xhr object with and the response statusText shows "error"... Can anyone give me some insight and educate me?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
    jQuery.ajax({
        url:"https://www.fdic.gov/bank/individual/failed/banklist.csv",
        cache:false,
        crossDomain:true,
        xhr:function(){
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob';
            xhr.withCredentials = true;
            return xhr;
        },
        success: function(data){
          console.log("success",data)
          $("body").append("success " + data);
        },
        complete:function(data){
          console.log("complete",data);
          $("body").append("complete " + data.statusText);
            
        }
    });

</script>

You didn't say what you are seeing happen that causes you to say it is failing. Also `done` isn't an option for the ajax method (Ref. http://api.jquery.com/jQuery.ajax/). It's a function off of the promise/deferred returned from the `$.ajax()` method — Taplar, Apr 18 '18 at 16:48
If it were failing, the error callback would be being called with information that would help explain why. but.... you don't have an error callback. — Kevin B, Apr 18 '18 at 16:52
I see the network request get response code 200 but the complete callback is returned with the xhr response with the "statusText": "error". — desean, Apr 18 '18 at 16:52
I'm seeing a CORS error in my console when I run your script. — Taplar, Apr 18 '18 at 17:06

Cory Edwards · Answer 1 · 2018-04-18T18:36:18.013

If your console is showing the correct output, and the network is showing 200 ok, then you at least know that it is going into the correct methods when returning. With that said what is your data that you are returning? You probably need to have a structured html going into body.append rather than just text.

I would suggest either building a label and putting that label in the append() method, or putting a label directly in your html and referencing it instead.

Here are examples:

<label id="labelOutput"></label>
<script type="text/javascript>
    function outputData(data)
    {
        $('#labelOutput').html(data);
    }
</script>

Then call that function and give it the string that you tried to append to in your other functions, or do

<label id="labelOutput"></label>
<script type="text/javascript>
    function outputData(data)
    {
        $(body).append($('<label>' + data + '</label>');
    }
</script>

EDIT 1

Could it be that you are not properly catching the error message? There is a good example in this answer here by Musa that shows someone doing about what you are doing and includes an error function. I have included the code in case the link ever dies.

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhrFields:{
            responseType: 'blob'
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){

        }
    });

I see the network request get response code 200 but the complete callback is returned with the xhr response with the "statusText": "error". — desean, Apr 18 '18 at 17:03
Have you tried a normal $.get() or $.post() method? That may limit the number of reasons for the error since it simplifies the call. I think you would need the full jquery.min.js for that though. — Cory Edwards, Apr 18 '18 at 18:09
I need the to set the response type to be a blob in the case it is not textual data that I get back, once I get the response I will check the magic number to see if it is riff/wav/zip or what ever and handle it appropriately — desean, Apr 18 '18 at 18:31

Jquery Ajax fails

1 Answers1