Jquery ajax not catching 404

Question

I am trying to use AJAX to populate my dropdown list and I am returning a 404 with error message from my controller, and Ajax is not catching it...

My return at the controller is

return Response()->json(array('error' => '404 car type not found'), 404);

And here is my JS

$('document').ready(function () {
$('#car_type').bind('changed.bs.select', function () {
    $.ajax({
        type: 'POST',
        url:'carclass/'+$('#car_type').val(),
        dataType: 'json',
        error: function(XMLHttpRequest, textStatus, errorThrown){
            alert('status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
        },
        success: function( json ) {
           $.each(json, function(i, obj){
                $('#car_class').append($('<option>').text(obj.name).attr('value', obj.id));
           });
           $('#car_class').selectpicker('refresh');
        }
});
 });
 });

It is returning

GET http://localhost:8000/ads/cartype/2 404 (Not Found)

The problem would seem to be on the server side then, not your JS. — Rory McCrossan, Mar 21 '18 at 09:14
Why your ajax is doing a POST request to carclass/... and the return you mention is a GET to cartype/... ? — Ignasi, Mar 21 '18 at 09:16
"Not catching it" - not catching what? Is it hitting the `error:` callback but you're not getting the explicit message? Is it not catching that it's a 404 so hitting the 'success:' callback? — freedomn-m, Mar 21 '18 at 09:21
I am sorry , I realized this was answered already and I marked it duplicated... and it seems that my main problem was #car_type , it should have been #car_brand. I am embarrassed right now — , Mar 21 '18 at 09:56

Ankit Agarwal · Accepted Answer · 2018-03-21T09:15:50.887

1

Replace your error block with something like this where xhr.status will give you the status code of the response.

error:function (xhr, ajaxOptions, thrownError){
    if(xhr.status==404) {
        alert('status:' + xhr.status + ', status text: ' + xhr.statusText);
    }
}

edited Mar 21 '18 at 09:15

answered Mar 21 '18 at 09:14

Ankit Agarwal

30,378
5
37
62

1

Not sure who copied who and from which other question. Also, this does not answer what the OP is asking. – Rory McCrossan Mar 21 '18 at 09:14
I was writing the answer. I am unknown of another answer. @RoryMcCrossan – Ankit Agarwal Mar 21 '18 at 09:15
I'm referring to the other answer on this question which had an almost identical description before you edited, and exactly identical code and layout. – Rory McCrossan Mar 21 '18 at 09:16
Maybe that was copied @RoryMcCrossan . No idea – Ankit Agarwal Mar 21 '18 at 09:18
1

Given you posted 8 seconds after it's likely that you both copied the code from the same place. If it was an SO question it would have been more appropriate to vote to close as a duplicate. That however is moot as your answer is completely irrelevant to the issue – Rory McCrossan Mar 21 '18 at 09:19
@RoryMcCrossan will keep that thing in mind. My apologies. – Ankit Agarwal Mar 21 '18 at 09:21
I marked this as the correct answer , because it really helped with fixing an issue, but the main problem I was having was a misspelling on my side. – Mar 21 '18 at 09:57
@AmirMajid Why mark it as the correct answer if it's not correct? – Hedegare Mar 21 '18 at 10:03
@Jackowski it did help with something else related to the same code, and my question was "catching" the error message which is a 404 response – Mar 21 '18 at 10:32

SystemGlitch · Answer 2 · 2018-03-21T09:22:54.843

0

Use fail() instead. You could also use the done() callback, which is an alternative to success.

$.ajax( "example.php" )
  .done(function(data) {
    $.each(data.responseJSON, function(i, obj) {
            $('#car_class').append($('<option>').text(obj.name).attr('value', obj.id));
    });
    $('#car_class').selectpicker('refresh');
  })
  .fail(function(data) {
    alert('status:' + this.status + ', status text: ' + this.statusText);
  })
  .always(function() {
    alert( "complete" );
  });

edited Mar 21 '18 at 09:22

answered Mar 21 '18 at 09:16

SystemGlitch

2,150
12
27

1

1. The `error` property is not deprecated at all. The link you have added to the documentation even shows this. 2. There is no `fail` property in a `$.ajax()` call. Your code will not work. I presume you meant to use [`fail()`](http://api.jquery.com/deferred.fail/) instead. – Rory McCrossan Mar 21 '18 at 09:17
1

And `fail:` is not a replacement for `error:`, it's a method on the promise, so would be `$.ajax({..}).fail(function() { ... })` – freedomn-m Mar 21 '18 at 09:18
I can see the confusion over *".fail() method replaces the deprecated .error()"* (from the linked doc). It means the error method on the promise, not the error *callback* in the ajax call. – freedomn-m Mar 21 '18 at 09:20
1

Thanks, I edited to fix my mistake. – SystemGlitch Mar 21 '18 at 09:24
A good edit. But to be clear, there's no difference between `error:` and `.fail()` other than you can return the promise and add the `.fail()` later. So you've refactored OP's code, but not fixed it (unless you've added something not explained in the text). – freedomn-m Mar 21 '18 at 09:26

Jquery ajax not catching 404

2 Answers2