Where is the JSON Results from my jQuery AJAX POST Call?

Question

I have this code setup in a web page.

    <div id="gridResults">
</div>

<script type="text/ecmascript">
    jQuery.ajax({
        url: "http://localhost:6002/AggregateServices.svc/incident/10",
        type: "POST",
        async: true,
        success:
                function(json) {
                    var table = jQuery('<table />').attr('cellspacing', 0).attr('cellpadding', 4);
                    var header = jQuery('<tr />')
                        .append('<td>Case Number</td>')
                        .append('<td>Company</td>')
                        .append('<td>Created</td>')
                        .append('<td>Description</td>')
                        .append('<td>Stamp</td>')
                        .append('<td>Status</td>')
                        .append('<td>Type</td>');
                    table.append(header);
                    var row = jQuery('<tr/>')
                        .append('<td>' + json.CaseNumber + '</td>')
                        .append('<td>' + json.Company + '</td>')
                        .append('<td>' + json.Created + '</td>')
                        .append('<td>' + json.Description + '</td>')
                        .append('<td>' + json.Stamp + '</td>')
                        .append('<td>' + json.Status + '</td>')
                        .append('<td>' + json.Type + '</td>');
                    table.append(row);
                    jQuery('#gridResults').append(table).show();
                },
        error: function() { alert('An error occurred!'); }
    });
</script>

When I run the code I end up with this result.

Simple AJAX Sample with jQuery.

Case Number Company Created Description Stamp Status Type undefined undefined undefined undefined undefined undefined undefined

I checked via Fiddler 2, using POST, to make sure I was getting something back. The results I see coming back with Fiddler are as follows:

{"CaseNumber":"2","Company":"company","Created":"9\/1\/2010 6:31:45 PM","Description":"Some description goes here.","Stamp":"\/Date(-62135568000000-0800)\/","Status":"Stat","Type":"Type"}

So that looks like good JSON? Anyone have any idea why this isn't parsing? Or am I missing something else?

TROUBLESHOOTING SO FAR:

I tried to put the row into an append loop, thinking... not sure what I was thinking, but it didn't help anyway. What I did was this, the only difference is that it doesn't even give me the "undefined" as I got in the first sample results.

jQuery.each(json, function() {
var row = jQuery('<tr/>')
    .append('<td>' + this.CaseNumber + '</td>')
    .append('<td>' + this.Company + '</td>')
    .append('<td>' + this.Created + '</td>')
    .append('<td>' + this.Description + '</td>')
    .append('<td>' + this.Stamp + '</td>')
    .append('<td>' + this.Status + '</td>')
    .append('<td>' + this.Type + '</td>');
table.append(row);});  

Answer 1

have you tried using json.d or json.data?

Answer 2

You need to tell jQuery to parse the result as JSON by adding dataType: 'json' to the ajax parameters..

Answer 3

jQuery usually does not send json data as a function parameter when an ajax call is done, and if it sends it, is just string code, which you need to eval. try either one of these ideas:

1- do

var j = eval(json);

and instead of

.append('<td>' + json.Company + '</td>')

do

.append('<td>' + j.Company + '</td>')

or use

jQuery.getScript()

instead of jQuery.Ajax()

I like more the second, since it's the one I use

Answer 4

Does your returned object have a name?

So are you doing MyObj obj = new MyObj(); and then setting properties and then returning that object?

If you are then you need to also factor MyObj in your object so I think, untested, json.d.MyObj or just json.MyObj.propertyName;

Answer 5

After fighting back and forth with the code I realized what I had done wrong. This was in two different projects, a WCF and an ASP.NET MVC Project with the jQuery calling the services. Both projects were using Cassinni, which inherently is where the real problem happened. I had the WCF Project on one port and the ASP.NET MVC on another port, but both were running from localhost. That leads to the same origin problem. I setup the entire solution again in a single project (because I'm hard headed and did NOT want to install and run IIS to remove Cassinni as the issue). I've outlined my entire solution here tying it all together.

So to summarize, the code above is actually correct and does indeed work. The ports however make it fail in any security compliant browser (in other words, non-IE browsers). It seems that IE likes to ignore the same origin issue, leaving that as a gaping security concern with that browser. :/