Develop Reference

$.ajax() returns syntax error: Unexpected end of json input

So I'm working on a website where I have to implement a chat, currently the whole thing is running on localhost.
I'm getting this error:
SyntaxError: Unexpected end of JSON input
and can't figure out why. I have googled a little but can't find an answer, that actually works. I actually did this yesterday, on another computer and that worked super, but today it won't work and I can't figure out why.
Thank you for the great answers.
$(function() {
updateChat("updateChat", null);
$(".chat-form").submit(function(event) {
event.preventDefault();
if ($(".chat-form input").val() != "") {
updateChat("sendMessage", $(".chat-form input").val());
}
});
setInterval(function() {
updateChat("updateChat", null);
}, 3000);
function updateChat(method, message) {
$.ajax({
type: "POST",
url: "action/chat.php",
data: {
function: method,
message: message
},
dataType: "json",
success: function(data) {
console.log(data);
},
error: function (request, status, error) {
console.log(error);
}
})
}
})

Most likely there's an error or warning in your PHP code being displayed, and because you are expecting only json, that causes the syntax error.
There are a few ways to find out what's going on:
open the developer console in your browser and see what the response is the network tab
check your PHP error log
temporarily change your dataType to html and you'll see your console.log(data)

I was getting this error due to my backend php function NOT returning a response as it should have been. It was returning nothing. My parent function that should have been returning the response was calling a child function that WAS returning a response, but the parent function wasn't passing that child return back to the ajax call.

Another possible culprit for these type of errors could be an improper python "shebang" on your back-end (server side) script.
In my particular case I had ajax call to python cgi script via Apache web server and I could not find a more descriptive error message at front-end debug tools. However, Apache logs indicated that the back-end script had problems importing a one of the python scripts because the interpreter did not recognize it. After checking the "shebang" of that back-end script sure enough it had the wrong interpreter specified because I just copied a template file over and forgot to modify it..
So, check your "shebang" at the top of your script to make sure it points to correct interpreter. Example:

For MVC controller you must return a valid JsON
return new JsonResult() { Data = new { test = 123 } };
instead of
return new JsonResult();

Ajax fails 5% of time, response is "error"

I'm using jQuery to handle Ajax-calls.
I've noticed that, about 5% off the time, the ajax call fails. To make sure I get a good understanding of what's going wrong, I use this code:
$.ajax({
type:'POST',
url:'somepage.php',
data:{somedata:somedata},
success:function (data) {
var IS_JSON = true;
try
{
var newdata = jQuery.parseJSON(data);
}
catch(err)
{
IS_JSON = false;
}
if(IS_JSON)
{
//this is the part where a correct response is handled
}
else
{
//In case somepage.php gives a php-error, I put the exact error (=data) in the error-table at error.php.
window.location = "error.php?errorstring="+data;
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
//In case the ajax errors, I store the response (timeout, error, ...) in the database at error.php
window.location = "error.php?errorstring="+textStatus;
}
});
"Good" responses contain JSON, which I parse. If it's not JSON (for example just raw text from an php error) I don't try to parse it, but store the error in my database.
I would understand errors containing php errors that occured on somepage.php (since it's quiet a large page), but I'm supprised that the main errors I get, are errors of the ajax failing. The response data is just "error".
Anyone knows what the cause could be? What causes ajax-calls to fail? It's not a timeout, and it's also nothing like that somepage.php wasn't found or something. It's also not an error on somepage.php, since in that case, the Ajax-call would be successful, and the php-error would be logged in my database.
Edit: I used this obfuscator to make the script a little harder to read... Don't know if this could be causing the errors...

You should set dataType: 'json' in your ajax call. Coz if your not setting this up and your expecting a json result, the result will be treated as 'string' by default.

Error handling and saving logs to text files

I want to do error handling in javascript.
I want to log the error occurred in the javascript.
I don't want to use the database to store the errors.I want to store all the error in a txt file(that txt file should be present in the server where that website is hosted. So that others can't access that file.
How to do the above requirement.
I searched in Google and find
function WriteToFile() {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine('Hello');
s.Close();
}
this is also not working in all conditions.
1. You're using a non-ie browser (which doesn't support activex objects)
2. you're using an ie browser on an xp machine with sp2 installed and the activex object is being blocked
So please help me to solve this problem.
Thanks in advance.

Use a try/catch to detect the error first of all:
try
{
// code that could error here
}
catch(err)
{
// do an ajax call to the server
}
In the catch block, you could do an ajax call to the server. On the server you will need some server side script (such as PHP, ASP etc etc) to process the request and log the error to a local text file. In the catch block above, err.message will give you the error message string which you can include in your ajax call.

HI you can use alternative way to handle the error as below code
jQuery.ajax({
type: "POST",
url: "urlpage",
dataType: "html",
data: "types":$("#catid").val(),
success: function (response) {
alert("Successfully!!!");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
When any error occurred you can call another ajax function or same function once again.
This works mostly in all ajax call to handle error, Try it.

Error notification not working

My problem happens to be the error, I am attempting to produce an error, in this case the error being hiding the loading symbol and showing a refresh button in order for the user to reload the page to see if the data loads this time.
$(document).ready(function () {
$('#busy').show();
$(document).bind('deviceready', function () {
var today = $('#todaysong');
$.ajax({
url: 'my url',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function (data, status) {
$.each(data, function (i, item) {
var song = '<name>' + item.name + '</name>' + '<artist>' + item.artist + '<br></artist>';
$('#busy').hide();
today.append(song);
});
},
error: function (error) {
$('#busy').fadeOut();
$('#reload').fadeIn();
}
});
});
});
This is my code, could someone advise on what I am doing wrong, I've tried a few things and cannot seem to get it to work, also would I make it so said button was able to refresh this individual piece of code?
Thanks a lot.

In order to debug your code:
Are you generating an error on your own? Is it really an error? Track your request via Firebug or ...
Be sure about running the error function. Again try Firebug or such things to set break points.
Check the JavaScript console for being sure there is no any of damn JavaScript error. And again Firebug error console.

Without seeing other details it is difficult to suggest.
Still I'm trying.. Check the IDs of the elements you have mentioned is same as they are in HTML. Check in HTML that one id is not assigned to more than one element.
In the AJAX code remove jsonp: 'jsoncallback', for a while and test if it is working.

error(jqXHR, textStatus, errorThrown)
A function to be called if the request fails. The function receives
three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a
string describing the type of error that occurred and an optional
exception object, if one occurred. Possible values for the second
argument (besides null) are "timeout", "error", "abort", and
"parsererror". When an HTTP error occurs, errorThrown receives the
textual portion of the HTTP status, such as "Not Found" or "Internal
Server Error." As of jQuery 1.5, the error setting can accept an array
of functions. Each function will be called in turn. Note: This handler
is not called for cross-domain script and JSONP requests. This is an
Ajax Event.
Where the important part in this case is;
Note: This handler is not called for cross-domain script and JSONP
requests.
Quote from the API documentation of jQuery.ajax.
You should instead be using jsonpCallback.

Salesforce - success handler for $.ajax call

I have a form that I have been submitting to Salesforce with standard form submit action. By default, you can tell Salesforce to redirect you to a given URL after the POST has completed.
I no longer wish to be redirected since I have other activities on the form page. No problem, my page is already using jQuery so I can use the handy $.ajax utility like this:
$('#wrapper').on('click', '#formsubmit', function(e) {
e.preventDefault();
var formData = $('#subForm').serialize();
$.ajax({
type: "POST",
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: formData,
success: function() {
console.log('success!'); // or not!
},
error:function (xhr, ajaxOptions, thrownError){
console.log(xhr.status); // 0
console.log(thrownError); // empty
}
});
});
In my misguided brain, I imagined that Salesforce would return my good ol' redirect, which would count as a "success" that I can just discard/ignore. Misguided indeed!
I can see a 200 OK result (which usually means "success") but the success callback isn't tripped.
The lead is added to the Salesforce database
Inspecting the content of what's returned shows zero; there is no content in the response.
The error callback IS being tripped (despite the 200 OK) but maybe due to intentionally not redirecting it is seen as a "resource not available"? (therefore my status code is 0, and there is no content in the thrownError?).
Any advice on identifying this as a successful POST so that I can trigger additional actions in a callback? I don't want to TOTALLY ignore the response, or I could end up in a scenario in which I'm acting on a failed POST as if it was successful. I need to capture the success somehow.
It occurred to me that it could be a cross-site scripting issue as well, but since the application doesn't exchange data in JSONP, I'm not sure how to get around that (and I'm not sure how to identify it in the first place).

Few things here:
1) The redirect response being sent by salesforce's API is most likely being interpreted as an error code.
2) The response code of the subsequent page (after the redirect) is 200 OK, from the sound of it.
3) It is not possible to do a POST request using JSONP. This is a limitation of JSONP; which is not actually an AJAX request, but an HTTP GET request wrapped inside of a dynamically generated script tag. Also, JSONP only works if the request yields an HTTP response of 200 OK.
I would recommend using your own server-side intermediary to handle your AJAX POST request. This will act as a proxy between your front-end app and salesforce's API. This will also allow you to better control the response being sent to your app.

var formData = $('#subForm').serialize();
var response = $.ajax({
type: "POST",
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: formData,
success: function() {
console.log('success!'); // or not!
},
error:function (xhr, ajaxOptions, thrownError){
console.log(xhr.status); // 0
console.log(thrownError); // empty
}
}).responseText;
where var response will contain the return value from your ajax call