I have several different forms that each return something different. I need to detect if it's a simple string (so i can put it in the error/status area) or if its javascript I do nothing and let it execute.
This is currently how I'm doing my checking, but I want to make sure this is 100% sturdy and reliable... I couldn't think of any other way.
The other option would be to always use JSON, but then I need a JSON shim, as well as somehow trying to serialize javascript into JSON.
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize()
})
.done(function(data, textStatus, xhr) {
if (!xhr.getResponseHeader('Content-Type').match(/text\/javascript/i)) {
form.find('.status').text(data).removeClass().addClass('status status-done').slideDown(200);
} else {
// this is where i do nothing and let JS run
}
})
The following works, but I'm afraid there would be some edge case where it's not going to work (not sure what that might be, but it's important this section works 100%)
Note, Not certain about detail of requirement . If interpret Question correctly , at different form elements , different response types from $.ajax() requests ? a) Check for response type string ? b) do nothing ?
Could possibly check for response type string within json response with
if (typeof data.data === "string") {
// do stuff , with `string`
}
if $.ajax() expect json response , receive js , could possible run the piece immediately. At piece below , first response is string , filtered through if at .done() . Second response json object having a js function expression as property , which appear to run immediately , at $.ajax() success textStatus . Still capable to check response type of object at else , though , run as script . See empty xhr.repsonseText and xhr.reponseJSON at console
Try
var urls = [["/echo/json/","abc"]
, ["/echo/json/",
{"abc":
(function() {
setTimeout(function() {
$("body").append("<div id=data>"
+ "object" + "</div>");
$("#data")
.hide(0)
.fadeIn(1200)},1200)
}())
}]
];
var request = function(url, _data) {
$.ajax({
type: 'POST',
url: url,
data: {json : JSON.stringify({"data":_data})}
})
.done(function(data, textStatus, xhr) {
if (typeof data.data === "string") {
$("body").append("<div>" + data.data + "</div>")
} else {
console.log(typeof data.data
, data
, xhr.responseText
, xhr.responseJSON);
// this is where i do nothing and let JS run
}
})
};
$.each(urls, function(k, v) {
request(v[0], v[1])
});
jsfiddle http://jsfiddle.net/guest271314/y9b7t740/
See
jQuery getScript() vs document.createElement('script') , script.js
Calling a JavaScript function returned from an Ajax response
jQuery: Evaluate script in ajax response
What is JSONP all about?
jquery version: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
$.ajax({
url: CI_ROOT + current_page + '/get_results' ,
type: 'post',
data: { 'primary_key': primary_key, 'search_category':search_category, 'sub_category': sub_category ,'search_page':search_page, 'search_order': search_order, 'project_type': project_type},
beforeSend: function(){
$('.browse-list').html(spinner);
$('.page-number-nav').html('');
},
success: function(r){
var response_obj = jQuery.parseJSON(r.responseText);
$('.browse-list').html('');
if (response_obj.status == 'SUCCESS')
{
$('#sort_menu').hide();
$('#sort_type').hide();
if ((response_obj.results != 'No results') && (search_category != 'group') && (search_category == 'title' || (primary_key > 0)))
{
$('#sort_menu').show();
$('#sort_type').show();
}
$('.browse-list').html(response_obj.results);
$('.page-number-nav').html(response_obj.pagination);
}
}
});
if (r.responseText == undefined){alert('Empty');} returns Empty for IE 8 & 9, but works for IE10 & all other browsers
I've read & tried every post here I can find that might be relevant, cannot understand why this only bombs for those two browsers, and what to check for
TIA!
Try giving you ajax call a dataType like so:
dataType: 'json'
so it knows what kind of data you are expecting.
You should also return the content type in the response header from the server as application/json - your json_encode method just converts your object to JSON, but apparently does not apply the correct headers (ref php.net)
You'll want to add:
header('Content-Type: application/json;charset=utf-8');
With the dataType declared explicitly there shouldn't be any need for the jQuery.ParseJSON, as it will convert it before it calls the success handler, so the parameter r will be the JSON you are expecting :)
Also just a note (as OP found out) that the header function call needs to be before your json_encode call
I'm creating a tree using Dojo and two seperate sets of data. One set of data makes up the main tree structure. The second set of data is dependent on a value from the first set. I'm using xhrGet and Dojo 1.7.3 to get the data.
Once the second set of data has been returned, I'm looking at the values of the JSON to determine a value of a variable, that's then passed into the tree. The variable displays a "!" if an "alert" value is present in the JSON returned and blank if there isn't.
var theAlert = dojo.xhrGet({
url: proxy + serviceurl + targetId,
handleAs: 'json',
load: function(data){
if(typeof data.alerts[0] != 'undefined'){
var hello = "!";
return hello;
}
else{
console.log("There is nothing there");
},
error: function(error){
console.log(error)
}
});
The problem I'm having is that when I write "theAlert" variable where I need to, it appears as "[object Object]" and not as "!".
I feel like I'm doing something wrong, but I can't figure out what.
I have already tried using theAlert.valueOf(); to no success. Help?
The data is received correctly as well, I can view it via console log.
dojo.xhrGet() returns a Deferred - http://dojotoolkit.org/reference-guide/1.9/dojo/Deferred.html
You need to do something like:
var deferred = dojo.xhrGet({
url: proxy + serviceurl + targetId,
handleAs: 'json'
});
deferred.then(
function(data){
if(typeof data.alerts[0] != 'undefined'){
processAlert("!");
} else{
console.log("There is nothing there");
}
},
function(error){
console.log(error)
}
);
function processAlert(a) {
alert(a);
}
Look at the docs.
You need to return data, not hello.
I am having problems with a JSON AJAX callback when the returned JSON object contains no data. My code is as follows:
$.ajax({
type: "POST",
url: "includes/get_menu_name.php",
headers: {"cache-control": "no-cache"},
data: data,
success: function(html) {
//alert(html);
var app_data = "";
if (html.MenuData != 0) {
$.each( $.parseJSON(html).MenuData, function() {
app_data += "<li data-short='"+this['dish_short']+"' data-desc='"+this['dish_desc']+"' data-dish_id='"+this['dish_id']+"'>"+this['dish_name']+"</li>";
});
$('.listbox').show();
$('.nameslist').html(app_data);
$('li').hover(function() {
$(this).addClass('hover2');
},function(){
$(this).removeClass('hover2');
});
if (html == "") {
$('.listbox').hide();
}
$('li').click(function() {
//alert($('li', this).data('short'));
$('.price').val("");
var main_name = $(this, 'li').text();
$('.main_name').val(main_name);
//$('.price').val($(this).find('.ajaxid').text());
if(main_name.length > 40) {
$('.short_name').val($(this).data('short'))
} else {
$('.short_name').val(main_name);
}
if($(this).data('desc')!="") {
$('.dish_desc').val($(this).data('desc'));
}
var dish_id=$(this).data('dish_id');
$('.main_name').data('dish_id', dish_id);
$('.listbox').hide();
});
}
}
});//end ajax
The error comes back as:
TypeError:$.parseJSON(...) is null
I have tried various methods to check if there is data within the callback but none seem to work. I am very new to using JSON and is wondering whether I should add a different call back via the php page if there is no data to return, however would like to find out if there is a way to do this via the javascript.
$.ajax with post will return HTML in string format you need something like this!
success:function(html)
{
if(html)
{
try
{
html = JSON.parse(html);
if(html.MenuData)
{
// do something interesting
}
else
{
// failed
}
}
catch(e)
{
// failed
}
}
else
{
// failed because response is empty
}
}
Here you can specify dataType to use as json
$.ajax({
type: 'POST',
url: ajaxURL,
data:data,
dataType: 'json',
success: function(data){
JSON.parse(data);
}
});
And in server side script you must have to encode data using json_encode function.
While fetching json via ajax, here are a few things to note (incase it catches your issue too)
1) Content-Type
Json parsing will work fluently when Content-type: application/json
A html fetch (meaning Content-Type: text/html or equivalent) needs manually parsing json as String.
2) Jquery version
This shouldn't be a problem since it has subsided since version: 1.5 (you might be using latest one, 1.9)
Here is a link to the json related bug: http://bugs.jquery.com/ticket/8108
For json intensive coding, people often use jquery-json (http://code.google.com/p/jquery-json/) which a wrapper over simple jquery. You may want to consider if fix isn't easy.
I hope it answers atleast partially. Thanks..
Been getting a "parsererror" from jquery for an Ajax request, I have tried changing the POST to a GET, returning the data in a few different ways (creating classes, etc.) but I cant seem to figure out what the problem is.
My project is in MVC3 and I'm using jQuery 1.5
I have a Dropdown and on the onchange event I fire off a call to get some data based on what was selected.
Dropdown: (this loads the "Views" from the list in the Viewbag and firing the event works fine)
#{
var viewHtmls = new Dictionary<string, object>();
viewHtmls.Add("data-bind", "value: ViewID");
viewHtmls.Add("onchange", "javascript:PageModel.LoadViewContentNames()");
}
#Html.DropDownList("view", (List<SelectListItem>)ViewBag.Views, viewHtmls)
Javascript:
this.LoadViewContentNames = function () {
$.ajax({
url: '/Admin/Ajax/GetViewContentNames',
type: 'POST',
dataType: 'json',
data: { viewID: $("#view").val() },
success: function (data) {
alert(data);
},
error: function (data) {
debugger;
alert("Error");
}
});
};
The above code successfully calls the MVC method and returns:
[{"ViewContentID":1,"Name":"TopContent","Note":"Content on the top"},
{"ViewContentID":2,"Name":"BottomContent","Note":"Content on the bottom"}]
But jquery fires the error event for the $.ajax() method saying "parsererror".
I recently encountered this problem and stumbled upon this question.
I resolved it with a much easier way.
Method One
You can either remove the dataType: 'json' property from the object literal...
Method Two
Or you can do what #Sagiv was saying by returning your data as Json.
The reason why this parsererror message occurs is that when you simply return a string or another value, it is not really Json, so the parser fails when parsing it.
So if you remove the dataType: json property, it will not try to parse it as Json.
With the other method if you make sure to return your data as Json, the parser will know how to handle it properly.
See the answer by #david-east for the correct way to handle the issue
This answer is only relevant to a bug with jQuery 1.5 when using the file: protocol.
I had a similar problem recently when upgrading to jQuery 1.5. Despite getting a correct response the error handler fired. I resolved it by using the complete event and then checking the status value. e.g:
complete: function (xhr, status) {
if (status === 'error' || !xhr.responseText) {
handleError();
}
else {
var data = xhr.responseText;
//...
}
}
You have specified the ajax call response dataType as:
'json'
where as the actual ajax response is not a valid JSON and as a result the JSON parser is throwing an error.
The best approach that I would recommend is to change the dataType to:
'text'
and within the success callback validate whether a valid JSON is being returned or not, and if JSON validation fails, alert it on the screen so that its obvious for what purpose the ajax call is actually failing. Have a look at this:
$.ajax({
url: '/Admin/Ajax/GetViewContentNames',
type: 'POST',
dataType: 'text',
data: {viewID: $("#view").val()},
success: function (data) {
try {
var output = JSON.parse(data);
alert(output);
} catch (e) {
alert("Output is not valid JSON: " + data);
}
}, error: function (request, error) {
alert("AJAX Call Error: " + error);
}
});
the problem is that your controller returning string or other object that can't be parsed.
the ajax call expected to get Json in return. try to return JsonResult in the controller like that:
public JsonResult YourAction()
{
...return Json(YourReturnObject);
}
hope it helps :)
There are lots of suggestions to remove
dataType: "json"
While I grant that this works it's ignoring the underlying issue. If you're confident the return string really is JSON then look for errant whitespace at the start of the response. Consider having a look at it in fiddler. Mine looked like this:
Connection: Keep-Alive
Content-Type: application/json; charset=utf-8
{"type":"scan","data":{"image":".\/output\/ou...
In my case this was a problem with PHP spewing out unwanted characters (in this case UTF file BOMs). Once I removed these it fixed the problem while also keeping
dataType: json
Your JSON data might be wrong. http://jsonformatter.curiousconcept.com/ to validate it.
Make sure that you remove any debug code or anything else that might be outputting unintended information. Somewhat obvious, but easy to forgot in the moment.
I don't know if this is still actual but problem was with Encoding. Changing to ANSI resolved the problem for me.
If you get this problem using HTTP GET in IE I solved this issue by setting the cache: false.
As I used the same url for both HTML and json requests it hit the cache instead of doing a json call.
$.ajax({
url: '/Test/Something/',
type: 'GET',
dataType: 'json',
cache: false,
data: { viewID: $("#view").val() },
success: function (data) {
alert(data);
},
error: function (data) {
debugger;
alert("Error");
}
});
you should remove the dataType: "json". Then see the magic... the reason of doing such thing is that you are converting json object to simple string.. so json parser is not able to parse that string due to not being a json object.
this.LoadViewContentNames = function () {
$.ajax({
url: '/Admin/Ajax/GetViewContentNames',
type: 'POST',
data: { viewID: $("#view").val() },
success: function (data) {
alert(data);
},
error: function (data) {
debugger;
alert("Error");
}
});
};
incase of Get operation from web .net mvc/api, make sure you are allow get
return Json(data,JsonRequestBehavior.AllowGet);
If you don't want to remove/change dataType: json, you can override jQuery's strict parsing by defining a custom converter:
$.ajax({
// We're expecting a JSON response...
dataType: 'json',
// ...but we need to override jQuery's strict JSON parsing
converters: {
'text json': function(result) {
try {
// First try to use native browser parsing
if (typeof JSON === 'object' && typeof JSON.parse === 'function') {
return JSON.parse(result);
} else {
// Fallback to jQuery's parser
return $.parseJSON(result);
}
} catch (e) {
// Whatever you want as your alternative behavior, goes here.
// In this example, we send a warning to the console and return
// an empty JS object.
console.log("Warning: Could not parse expected JSON response.");
return {};
}
}
},
...
Using this, you can customize the behavior when the response cannot be parsed as JSON (even if you get an empty response body!)
With this custom converter, .done()/success will be triggered as long as the request was otherwise successful (1xx or 2xx response code).
I was also getting "Request return with error:parsererror." in the javascript console.
In my case it wasn´t a matter of Json, but I had to pass to the view text area a valid encoding.
String encodedString = getEncodedString(text, encoding);
view.setTextAreaContent(encodedString);
I have encountered such error but after modifying my response before sending it to the client it worked fine.
//Server side
response = JSON.stringify('{"status": {"code": 200},"result": '+ JSON.stringify(result)+'}');
res.send(response); // Sending to client
//Client side
success: function(res, status) {
response = JSON.parse(res); // Getting as expected
//Do something
}
I had the same problem, turned out my web.config was not the same with my teammates.
So please check your web.config.
Hope this helps someone.
I ran into the same issue. What I found to solve my issue was to make sure to use double quotes instead of single quotes.
echo "{'error':'Sorry, your file is too large. (Keep it under 2MB)'}";
-to-
echo '{"error":"Sorry, your file is too large. (Keep it under 2MB)"}';
The problem
window.JSON.parse raises an error in $.parseJSON function.
<pre>
$.parseJSON: function( data ) {
...
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
...
</pre>
My solution
Overloading JQuery using requirejs tool.
<pre>
define(['jquery', 'jquery.overload'], function() {
//Loading jquery.overload
});
</pre>
jquery.overload.js file content
<pre>
define(['jquery'],function ($) {
$.parseJSON: function( data ) {
// Attempt to parse using the native JSON parser first
/** THIS RAISES Parsing ERROR
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
**/
if ( data === null ) {
return data;
}
if ( typeof data === "string" ) {
// Make sure leading/trailing whitespace is removed (IE can't handle it)
data = $.trim( data );
if ( data ) {
// Make sure the incoming data is actual JSON
// Logic borrowed from http://json.org/json2.js
if ( rvalidchars.test( data.replace( rvalidescape, "#" )
.replace( rvalidtokens, "]" )
.replace( rvalidbraces, "")) ) {
return ( new Function( "return " + data ) )();
}
}
}
$.error( "Invalid JSON: " + data );
}
return $;
});
</pre>