jQuery "parseerror" with static JSONP callback function

Question

Ok, simple JSONP setup with jQuery, built with the requirement that I have "static" URLs beyond the search term:

function handleJSONPResponse (data, status, request) {
    // update UI
}

$(function () {
$('#some-input').on('keyup', function () {
    $.ajax('http://www.example.com/service/', { 
        dataType : 'jsonp',
        jsonpCallback : 'handleJSONPResponse',
        data : {
            search : $('#some-input').val()
        },
        complete : function (xhr, status) {
            if (status === 'parsererror') {
                console.log(xhr.responseText)
            }
        }
    });
});

When the user presses keys, they requests are fired. For the purpose of this question, it doesn't matter if "hamme" returns after "hammer" we just want to make the call (I do handle this in the real code). My problem is this... sometimes, especially under frequent key presses, I don't get a UI update, I get an error that gets logged to my console that looks something like this:

handleJSONPResponse({"JSON" : "Some Data"})

So, as you can see, the response text that jQuery has is fine, but its still causing a parsererror. I've also verified that the JSON content is OK. Let me stress that sometimes the JSONP for "hammer" works, and sometimes the JSONP for "hammer" fails. Its not a back-end error; I always get what looks like a valid JSONP response in my xhr.responseText.

I've tried this with the JSONP callback handler passed into the "success" parameter for the Ajax request, but this does not change the operation. The only thing that I can do that prevents this error is to remove the specified JSONP callback name and let jQuery make random ones, but I have a requirement from our caching layer that states that I must keep the URL static, thus a static callback name.

What can I do to make sure that I don't randomly get parsererror fails from jQuery?

You can see an example here:

http://jsfiddle.net/yVqpS/

The JSFiddle "Echo" JSONP produces errors far less frequently than my local service, but if you hammer at it, you'll see some "handleJSONPResponse not defined" errors come through your console...

Clarification: Cross-domain is required, so anything that isn't cross-domain doesn't work. Sorry I did not make that clearer in the first example other than using JSONP as my standard rather than a normal Ajax request.

Answer 1

It's probably easier to just use $.getScript in this case:

http://jsfiddle.net/yVqpS/1/ (note how it's running the script in the body, not dom load. head will work too. function must be defined in the global namespace.)

function handleJSONPResponse(data, status, request) {
    console.log('response', data);
}

$(function(){
    $('#some-input').on('keyup', function () {
        $.getScript('http://jsfiddle.net/echo/jsonp/?' + $.param({
            search: $('#some-input').val()
        }) + "&callback=handleJSONPResponse");
    });
});