.ajax JSONP parsererror

Question

I'm trying to use an ajax call to bring back data from a web api. I wrote 2 similar functions and neither work. I can see the data come back through Fiddler, but it won't go to the success call, for both of the functions below. What am I doing wrong? The data comes back in both functions in Fiddler, it just doesn't go to success.

Here is attempt 1:

    function PopulateDivisions()
{
    $.support.cors=true;


    $.ajax({
        type:'GET',
        url:'http://IP/Service/api/DivisionSearch/GetAllDivisions',
        data: {},
        contentType: 'application/json; charset=utf-8',
        dataType: 'jsonp',

        success: function(data) {

                alert(data);

                $("#divisionSelect").append($('<option></option>').val("-99").html("Select One"));
            $.each(data, function(i, item){
                $("#divisionSelect").append($('<option></option>').val(item.Name).html(item.Name));
            });
        },
        error: function(xhrequest, ErrorText, thrownError) {
            alert("Original: " + thrownError + " : " + ErrorText);
        }
    });

}

Error: jQuery19102671239298189216_1382022403977 was not called : parser error

Here is the data Fiddler is showing comes back:

    [{"Id":1,"Description":"Executive","Name":"Executive "},{"Id":2,"Description":"ASD","Name":"Administrative Services Division "},{"Id":3,"Description":"COM","Name":"Communications "},{"Id":4,"Description":"CP","Name":"Contracts and Procurement "},{"Id":5,"Description":"PMD","Name":"Program Management Division "},{"Id":6,"Description":"RED","Name":"Research and Evaluation Division "},{"Id":7,"Description":"IT","Name":"Information Technology "}]

Here is attempt #2:

    function PopulateDivisions2()
{


    $.support.cors=true;


    $.ajax({
        type:'GET',
        url:'http://IP/Service/api/DivisionSearch/GetAllDivisionsJsonP',
        data: {},
        contentType: 'application/json; charset=utf-8',
        dataType: 'jsonp',
        jsonp: false,
        jsonpCallback: "myJsonMethod",

        success: function(data) {
                //data = JSON.parse(data):
                alert(data);

                $("#divisionSelect").append($('<option></option>').val("-99").html("Select One"));
            $.each(data, function(i, item){
                $("#divisionSelect").append($('<option></option>').val(item.Name).html(item.Name));
            });
        },
        error: function(xhrequest, ErrorText, thrownError) {
            alert("PopulateDivisions2:  " + thrownError + " : " + ErrorText);
        }

    });

}

Error: myJsonMethod was not called : parsererror

Here is the data Fiddler shows is coming back:

    "myJsonMethod([{\"Id\":1,\"Description\":\"Executive\",\"Name\":\"Executive \"},{\"Id\":2,\"Description\":\"ASD\",\"Name\":\"Administrative Services Division \"},{\"Id\":3,\"Description\":\"COM\",\"Name\":\"Communications \"},{\"Id\":4,\"Description\":\"CP\",\"Name\":\"Contracts and Procurement \"},{\"Id\":5,\"Description\":\"PMD\",\"Name\":\"Program Management Division \"},{\"Id\":6,\"Description\":\"RED\",\"Name\":\"Research and Evaluation Division \"},{\"Id\":7,\"Description\":\"IT\",\"Name\":\"Information Technology \"}]);"

are you receiving json or jsonp from your request ? You specified jsonp in the code but the title of the question tells "json", so the problem may be there... — Laurent S., Oct 17 '13 at 15:15
I put the datatype as jsonp. Json didn't bring anything back, it's cross domain, so jsonp worked. I can see the data in fiddler, just can't get to success in ajax call. — user1202606, Oct 17 '13 at 15:21

score 2 · Answer 1 · edited May 23 '17 at 10:33

2

contentType: 'application/json; charset=utf-8' Tells your server that you are sending JSON data, but you don't have any data you are sending. Try leaving that setting out.

If you were to brows to your url in the browser do you get json back?

I'm not sure if this would matter, but I would remove the error setting because it says in the jQuery Ajax documentation that This handler is not called for cross-domain script and cross-domain JSONP requests.

I would try to run this with the least amount of configuration like this:

$.ajax({
    url:'http://IP/Service/api/DivisionSearch/GetAllDivisions',
    dataType: 'jsonp',
    success: function(data) { console.log(data); }
});

See if this works and then build on top of it. Without jsfiddle it's hard to debug what's going on.

Here is a link that should be a good resource for you: Basic example of using .ajax() with JSONP?

edited May 23 '17 at 10:33

Community

1
1

answered Oct 17 '13 at 15:16

edhedges

2,722
2
28
61

if I put the url in the browser I do get json back. – user1202606 Oct 17 '13 at 15:51
@user1202606 I've got nothing else besides to make sure that your function that wraps your ajax call is actually getting called. I know it seems trivial, but I'm at a loss of what to debug next. – edhedges Oct 17 '13 at 16:08
I just edited my question above to show the data coming back in fiddler. Can you notice anything with the data maybe? – user1202606 Oct 17 '13 at 16:43
@user1202606 I'm not sure, but it looks like it is returning the callback and I doubt that you want that. You just want the data. That is where your `jsonp: false` should come into play. Don't specify a `jsonpCallback`. – edhedges Oct 17 '13 at 17:32
I can't believe that this important thing like $.ajax is so buggy? I try by days to solve this issue and can't understand why record is saved in remote DB but I got an error "parsererror"!? :O Geez – Ludus H Feb 15 '18 at 21:23

score 0 · Answer 2 · answered Oct 19 '13 at 13:06

 function PopulateDivisions2(){
$.support.cors=true;
$.ajax({
    type:'GET',
    url:'http://IP/Service/api/DivisionSearch/GetAllDivisionsJsonP?callback=?',
    data: {},
    contentType: 'application/json; charset=utf-8',
    dataType: 'jsonp',
    jsonpCallback: "myJsonMethod" });


function myJsonMethod(data) {
            //data = JSON.parse(data):
            alert(data);$("#divisionSelect").append($('<option></option>').val("-99").html("Select One"));
        $.each(data, function(i, item){
            $("#divisionSelect").append($('<option></option>').val(item.Name).html(item.Name));
        });
    }}

Can you try the above code? I have removed the success callback and included callback in query string.

.ajax JSONP parsererror

2 Answers2