Dreamer
Dreamer

Reputation: 7549

IE pop up 'Syntax Error' when JSONP gets no response

Current application has to retrieve information from another application, and this other application is not required to be active to respond the JSONP request so the initiate requester will pop up an alert message about it.

function jsonRequest(requestURL, errorMsg){
    var err = "";
    var requestData= {param1: value1, param2: value2};
    $.ajax({
        type: 'GET',
        async: true,
        data: requestData,
        jsonpCallback: 'jsonCb',
        url: requestURL,
        timeout: 20000,
        dataType: 'jsonp', /* this trigger the syntax error window by IE*/
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            if(data.hasError != null){
                error = data.error;
                alert(error);
            }else{
                //.... logic to output valid values
            } // closing } is not missing..duh
        },//success
        error:function(x, timeout, m) {
            alert(errorMsg);
        }
    });

    return err;
}

so then there are three possible scenarios:

  1. JSONP request receives valid data from the other application
  2. JSONP request receives empty data from the other application
  3. JSONP request gets no response(the other application is not active)

So far so good until testing on IE. The problem is when it comes to scenario 3 then IE pop up its classic Syntax Error, after click 'close' then the alert message in $.ajax error:{..} shows up

Message: Syntax error
Line: 1
Char: 1
Code: 0
URI:.......

SCRIPT1002: Syntax error

IE debug tool is pretty lame so it wont allow me to go any details. After I check javascript/jsp code line by line I found the cause of the issue:

In Scenario 3, once I change dataType: "jsonp" to dataType: "json" in the javascript code, then the error no more pop up, but of course the whole ajax request gonna fail. I cannot find out what returns to IE by the debugging tool, when the other application is inactive.

I wonder if there is any effective way to let IE to tolerate JSONP or any method to debug where is the cause of the issue.

Upvotes: 2

Views: 403

Answers (2)

Dreamer
Dreamer

Reputation: 7549

After several hours desperately debugging, finally the fix to this issue emerged:

Just put this setting in ajax code and then the script error never pop up:

crossDomain: true,

so that

$.ajax({
    type: 'GET',
    url: aUrl,
    async: true,
    data: urlData,
    jsonpCallback: 'jsoncallback',
    crossDomain: true, /***** the life saver ****/
    timeout: 20000,
    dataType: 'jsonp', 
    contentType: "application/json; charset=utf-8",
    success: function(json) {
        if(json.hasError != null && json.hasError == "true"){
            error = json.error;
            alert(error);
        }else{
            //.... logic to output valid values
        } 

    },//success
    error:function(x, tm, m) {
        alert(timeoutErr);
    }
});

works just fine

Upvotes: 0

Jaromanda X
Jaromanda X

Reputation: 1

The fact that IE9 works in any scenario with your code is a testament to the sheer incompetence of the microsoft programmers that created the javascript engine for that dinosaur

/rant - Solution to your problem follows: look for // you forgot this closing brace

function activateManifestJson(aUrl, code, timeoutErr){
    var error = "";

    // RESTful request data
    var urlData = {param1: value1, param2: value2};

    $.ajax({
        type: 'GET',
        url: aUrl,
        async: true,
        data: urlData,
        jsonpCallback: 'jsoncallback',
        timeout: 20000,
        dataType: 'jsonp', /* this trigger the syntax error window by IE*/
        contentType: "application/json; charset=utf-8",
        success: function(json) {
            if(json.hasError != null && json.hasError == "true"){
                error = json.error;
                alert(error);
            }else{
                //.... logic to output valid values
            // *******************************************
            } // you forgot this closing brace
        // ***********************************************
        },//success
        error:function(x, tm, m) {
            alert(timeoutErr);
        }
    });

    return error;
}

Upvotes: 1

Related Questions