Develop Reference

how to detect a server error into a jquery ajax call?

I use Jquery to parse an json from url: the code is like this:
function fetchdata() {
var statusUrl = '/api/desk/j/';
$.ajax({
url: statusUrl,
dataType: "json",
type: 'post',
success: function(response) {
alert('ok');
},
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(err.message);
}
});
}
everything works fine, but if the server is not reachable I'm not able to detect it: I tried to do something in error: function, but seems that the code in error is fired only if the json has an error
have you got some ideas?
thank you!

You need to test the statusText from the jQuery textStatus response object. You can take advantage of your browser's developer console to inspect this object. You can expand the properties and methods for your perusal, however you wanna use it. Just click on the returned message of the console.log() to see these properties and methods that you wan't to use for error detection.
function fetchdata() {
var statusUrl = '/api/desk/j/';
$.ajax({
url: statusUrl,
dataType: "json",
type: 'post',
success: function(response) {
alert('ok');
},
error: function(textStatus) {
console.log(textStatus);
console.log(textStatus.statusText, textStatus.status);
}
});
}
fetchdata();

ajax success function cant change button text

I have a simple but strange question, I am not able to change the value of the button in an ajax post success callback, I am sure the callback gets executed as the alert was shown. Also, those buttons are created statically, I did not create them dynamically using Jquery.
Below is my ajax:
$.ajax({
type: "POST",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "/?handler=Queue",
data: $.param(params),
dataType: "json",
success: function (response) {
$("#btn-queue-lib").val("Cancel Queue");
alert(response.responseText);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
However, if I change the problem line outside of ajax, it works fine:
$("#btn-queue-lib").val("Cancel Queue"); // Either Here
$.ajax({
type: "POST",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "/?handler=Queue",
data: $.param(params),
dataType: "json",
success: function (response) {
alert(response.responseText);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
$("#btn-queue-lib").val("Cancel Queue"); // Or Here

I have found out the problem, I dunno for some reason the server is returning the success message but actually returning a badrequest. Hence I mistaken that the success function should be called. If I put the problem line in the error callback, it works fine. Thanks guys for your efforts !!!
~ (^_^)∠※

document.getElementById('btn-queue-lib').innerText = 'Cancel Queue'

change
$("#btn-queue-lib").val("Cancel Queue");
to
$("#btn-queue-lib").text("Cancel Queue");
and place the statement in ajax success function right before alert.

In Success use
$("#btn-queue-lib").html("Cancel Queue");

Even I have faced the same issue... I managed it as below hope it will help for too
function changeAfterAjax(){
$.ajax({
type: "GET",
url:"https://reqres.in/api/users?page=2",
//data: $.param(params),
dataType: "json",
success: function (response) {
$("#btn-queue-lib").text("Cancel Queue");// this is also works fine
//changeBtnTxt('btn-queue-lib','Cancel Queue');
//alert(response);
},
error: function (xhr) {
console.log(xhr);
}
})
}
function changeBtnTxt(id,txt){
$("#"+id).text(txt);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="changeAfterAjax()" id="btn-queue-lib">Click to chanage after ajax</button>

Calling beforeSend in ajax success

How to call beforeSend only in success? Right now, my button is also changing text to "Working" when error comes into ajax call.
success: function(data) {
alert("operation successful");
},
beforeSend: function() {
btnSubmit.val("Working...");
},
error: function(response) {
alert("something went wrong");
}

Use "complete" to alter the button text
complete: A function to be called when the request finishes (after success and error callbacks are executed)
success: function(data) {
alert("operation successful");
},
beforeSend: function() {
btnSubmit.val("Working...");
},
error: function(response) {
alert("something went wrong");
},
complete:function() {
btnSubmit.val("Done");
}
}

ajax not called..even alerts are not working

i am writing this code in my html page to hide one id in that page..alerts are also not working..method is not called
*<script>
alert("yo");
$(function checkUsertype(email_id)
{
alert("yup")
var usertype = $("#txtusertype").val();
$.ajax({
alert("hide")
url: 'rest/search/userType?email_id='+email_id,
type : "GET",
datatype : 'json',
cache : false,
success : function(data)
{
if(usertype=='webuser')
{
$("#themer").hide();
}
},
error : function(xhr, data, statusText,errorThrown)
{
}
});
})
alert("yo");
<script/>*

This is the problem.
$.ajax({
alert("hide")
You're trying to alert inside the ajax which is Syntax error. Try removing the alert inside ajax and it should work.
You can use alert in success, error callbacks as follow:
$(function checkUsertype(email_id) {
var usertype = $("#txtusertype").val();
$.ajax({
url: 'rest/search/userType?email_id=' + email_id,
type: "GET",
datatype: 'json',
cache: false,
success: function(data) {
alert('In Success'); // Use it here
console.log(data); // Log the response
if (usertype == 'webuser') {
$("#themer").hide();
}
},
error: function(xhr, data, statusText, errorThrown) {
alert('In Error'); // Use it here
console.log(errorThrown); // Log the error
}
});
});

jQuery Ajax Error object is undefined

I hvae a webmethod called using jquery ajax. I hits the error callback. Fine - I thought I will analyze the error - but it is coming as undefined.
What are the possibilities for the error values to be undefined? How to fix this, if it is a trivial error?
Note: xhr,status and error are undefined.
Note: I am using Chrome version 35 and IE 8
CODE
$(document).ready(function () {
function errorFunction(xhr, status, error) {
console.log(xhr);
if (xhr == 'undefined' || xhr == undefined) {
alert('undefined');
} else {
alert('object is there');
}
alert(status);
alert(error);
}
$.ajax({
type: "POST",
url: "admPlantParametersViewEdit.aspx/GetResult",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success");
alert(msg.d);
},
error: errorFunction()
});
});

You need to pass a reference to the function so change this:
error: errorFunction()
to this:
error: errorFunction
When you put the parens there, you were actually calling the function immediately and passing it's return. Without the parens, it is just a reference to the function that can be called later by the jQuery ajax infrastructure.
To further understand what was happening, your code error: errorFunction() was calling errorFunction() immediately with no arguments (which is what you were seeing in your debugging) and then fetching the return value from that function (which is undefined) and then putting that into your data structure which was passed to the ajax call. So essentially, you were doing the equivalent of this:
$(document).ready(function () {
function errorFunction(xhr, status, error) {
console.log(xhr);
if (xhr == 'undefined' || xhr == undefined) {
alert('undefined');
} else {
alert('object is there');
}
alert(status);
alert(error);
}
// obviously, not what you intended
errorFunction();
$.ajax({
type: "POST",
url: "admPlantParametersViewEdit.aspx/GetResult",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success");
alert(msg.d);
},
// also not what you intended
error: undefined
});
});
If you aren't using errorFunction() in other places, then a more common way to do this is to define it inline like you did with the success handler like this:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "admPlantParametersViewEdit.aspx/GetResult",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success");
alert(msg.d);
},
error: function(xhr, status, error) {
console.log(xhr);
if (xhr == 'undefined' || xhr == undefined) {
alert('undefined');
} else {
alert('object is there');
}
alert(status);
alert(error);
}
});
});