We Keep Coding

jQuery AJAX does not detect success

I have the following code.
$(".likeBack").on("click", function(){
var user = $(this).attr("user");
var theLikeBack = $(this).closest(".name-area").find(".theLikeBack");
$.ajax({
type: "POST",
dataType: "json",
url: "processes/rewind-knock.php",
data: "user="+user+"&type=likeback",
success: function(json){
alert("SUCCESS");
},
error: function(jqXHR, textStatus, errorThrown){
alert("XHR: " + jqXHR + " | Text Status: " + textStatus + " | Error Thrown: " + errorThrown);
}
});
});
Here, everything is functional. Network tab shows request and response well received as required. However, the success part is not getting executed. I tried adding beforeSend and complete and both are getting executed but success part (nothing inside the success blog is getting executed). I don't understand the reason why.
UPDATE
Add error part. It returns:
XHR: [object Object] | Text Status: parsererror | Error Thrown: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
UPDATE 2
Screenshot

give data in ajax like this and check,
data : {'user':user,'type':'likeback'},
In your Php code when you return the data, place all data in a array then use this,
echo json_encode($arr); //return the array in json form
now in your success function use
console.log(JSON.parse(json));
hope may help you. Thank you

Ajax call in javascript returns empty when the response is huge

Basically, I am trying to debug a code that was written long back by someone.
I have a jsp which is calling a javascript function on click of a button. In the javascript there is an ajax call happening to the Struts Action class. The Action class returns an Array List of objects to the jsp. My Array List has an inner list of objects too. Everything works fine when the list is small. But when the returned list is big, the ajax variable "data" returns as empty after a long time.
i think it is something to do with handling large data in the response. When i googled a few forums, i think the size of the response is exceeding a maximum limit and then returned as empty. When the response is small the variable "data" returns with a html reponse. But when it is huge, the variable has nothing.
Below is the ajax call. Since this is happening in production right now, any quick help is really appreciated. BTW, i am using Websphere 8.5.5.
function submitCriteria(submitSrc) {
var nameOfFormToPost = "criteriaForm";
var spanId = "resultDataSpan";
var formAsString = getFormAsString(nameOfFormToPost, submitSrc);
$.ajax({
type: "POST",
dataType: 'html',
url: "matchReconcileHome.do?execute=viewMatchResult",
data: formAsString,
success: function(data, textStatus) {
idx = data.indexOf("<title>XXXXXXX- XXXXX - Login</title>");
if (idx > 0 && idx < 500) {
window.location = "/pdrWeb/Login.jsp";
}
//Split the text response into Span elements
spanElements = splitTextIntoSpan(data, spanId);
//Use these span elements to update the page
replaceExistingWithNewHtml(spanElements);
$("#matchResult").treeTable();
setPageNavigation();
setResultControls();
//alert("Ajax called back Done" );
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Problem with server response:\n " + textStatus + ", Error: " + errorThrown);
}
});
return false;
}

How to detect a response which does not have an object

Complete newbie question :
When I query to database using API, I sometimes get a response which contains no objects.
With the code below no alerts are raised at all.
I need a method to detect this type of empty response - jQuery.isEmptyObject does not work.
$.get("http://api.lmiforall.org.uk/api/v1/ashe/estimatePay",
{ soc: soc, coarse: "false", filters:"region:12"},
function(datani) {
alert(datani);
if(jQuery.isEmptyObject(datani)) {
alert("empty");
}

use done event to identify.
<script>
$.get( "test.php", { name: "John", time: "2pm" } )
.done(function( data ) {
alert( "Data Loaded: " + data );
});
</script>

It sounds like you are confusing no response as being an empty object.
Something like:
var myObj = {};
would be considered an empty object that isEmptyObject() would return true for but an empty string (no response) would not
Try changing:
if(jQuery.isEmptyObject(datani)) {
To
if(!datani) {

With the code above no alert box appears at all.
The first alert() should be called; whether response is object or not.
You can add error handling to ajax request using .fail() to alert textStatus, errorThrown or property of jqxhr object.
Note, also js at Question is missing closing }) at $.get() .
$.get("http://api.lmiforall.org.uk/api/v1/ashe/estimatePay",
{ soc: soc, coarse: "false", filters:"region:12"},
function(datani) {
alert(datani);
}).fail(function(jqxhr, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown)
})

jQuery how to read this JSON string from responseText

I have tried almost everyway here on stack overflow, but somehow I cannot read JSON string data returned from a success function call in jquery ajax. my success function receives following JSON string:
Object {
readyState = 4, responseText = "{"
Response ":200,"
Data ":"
6 ","
Message ":"
6 "}", status = 200, statusText: "OK"
}
This is my success callback:
success: function(response, msg, responseText) {
if (response.Response == 200) {
console.log("Data was submitted");
var obj = responseText;
console.log(typeof obj);
} else if (response.Response == 400) {
console.log("there was some error");
}
}
When success function is fired and checks for status code, it executes console.log("Data was submitted"); statement successfully, however, I am not able to access the "Data":"6" key/value pair.
So far I have tried doing this:
var obj = responseText;
console.log(obj.Data);
and
console.log(obj.data[1]);
and numerous other ways, but either it says "undefined" or gives and error. However, when I console.log(obj), in console it shows 'obj'. which means I am getting a JSON object.
Please note that I have also tried:
obj = jQuery.parseJSON(responseText);
which gives me an error: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
What to do in this situation? I want to be able to extract the value of a key name "Data": and and assign its value ="6" to a variable.

The first parameter of the success callback is what you need, not the third. The first parameter will represent the body of the response as returned from the server. Also you don't need to be checking for anything different than 200 status code in a success callback. That's what the error callback is designed for because the success callback will never be fired if your server returns 400 status code.
So:
dataType: 'json',
success: function (response) {
console.log("Data was submitted");
console.log(response.Data);
},
error: function() {
console.log("there was some error");
}

The success callback is success: function(data, textStatus, jqXHR )
So the 1st, data will contain the data returned to the success function.

Send an array from node server to js script

My server (node.js) maintains an array :
var list = [];
I want to use this array in some js code (client side). I would like to retrieve it thanks to ajax. What is the best practice?
$.ajax({
url: "http://localhost:8000/updatePendingAlerts",
timeout: 2000,
success: function (data) {
console.log(data);
//data should be an array
},
error: function(jqXHR, textStatus, errorThrown) {
clearInterval(timeout);
alert('error ' + textStatus + " " + errorThrown);
}
});

Serialise it to JSON (with JSON.stringify) and output it with an application/json content-type header.
It will then be an array in data with the client side JavaScript you already have.