</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/1637019/how-to-get-the-jquery-ajax-error-response-text" dir="ltr">How to get the jQuery $.ajax error response text?</a>
<span class="question-originals-answer-count">
(11 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2018-03-21 09:43:44Z" class="relativetime">2 years ago</span>.</div>
</div>
</aside>
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)
</div>
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);
}
}
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" );
});