CODEWITHSUNDEEP
javascriptjqueryjsonp
atrueresistance
atrueresistance

Reputation: 1368

JSONP Object Error

I am trying to make a cross domain request to send/recieve some data. I can't get past the object error. Before I was getting the No Transport Error but adding Query.support.cors = true; solved this issue. 

var url = "http://CROSSDOMAINSERVER:PORT/Service1.svc/GetDataUsingDataContract";
            $.ajax({
                type: 'GET',
                url: url,
                data: 'tool=1&product=Some%20Product&details=9&bogus=should%20not%20pass%20validation', 
                datatype: "jsonp",
                contentType: "application/json",
                success: function (response) {
                    alert(response.data);
                },
                error: function (error) {
                    alert(error.statusText);
                }
            });

If I type the url out in a browser:

 http://CROSSDOMAINSERVER:PORT/Service1.svc/GetDataUsingDataContract?&tool=1&product=Some%20Product&details=9&bogus=should%20not%20pass%20validation

I get the correct response. 

{"d":{"__type":"ClientSideData:#ProdResourceToolService","details":"9","product":"Some Product","result":"1","site":"Somewhere, SD","systime":"2\/6\/2013 2:50:20 PM","team":"0000000000","tool":"1","user":"username"}}

When I use ajax it does not submit it to the database or return data, just object error. Does anyone have any suggestions on how to get around this?

I should also specify if I remove http://CROSSDOMAINSERVER:PORT/ from var url when debugging locally I get the correct json response. Why does cross domain not work?

Upvotes: 2

Views: 302

Answers (1)

Johan
Johan

Reputation: 35194

This is your current response:

{
    "d": {
        "__type": "ClientSideData:#ProdResourceToolService",
        "details": "9",
        "product": "Some Product",
        "result": "1",
        "site": "Somewhere, SD",
        "systime": "2/6/2013 2:50:20 PM",
        "team": "0000000000",
        "tool": "1",
        "user": "username"
    }
}

This is a valid JSON string. However, its not valid JSONP. If possible, make your service wrap the json in a function:

responseFunc({
    "d": {
        "__type": "ClientSideData:#ProdResourceToolService",
        "details": "9",
        "product": "Some Product",
        "result": "1",
        "site": "Somewhere, SD",
        "systime": "2/6/2013 2:50:20 PM",
        "team": "0000000000",
        "tool": "1",
        "user": "username"
    }
});

And in your $.ajax() call, add a property: jsonpCallback: 'responseFunc'.

Also, I would suggest passing the data as an object:

data: { tool: 1, product: 'Some Product' } //etc...

If you can access the service from the serverside without any issues you could create a httphandler (.ashx for example) and let it generate the JSON for you. Then you wouldn't have to deal with the cross domain issues on the client side.

Upvotes: 3

Related Questions