Cannot render JSON in IE, Ajax source Client-side

jonlewis1

Looks like I have a similar problem to this thread
http://datatables.net/forums/discussion/comment/38718

Hi, I'm having trouble getting a JSON response in Internet Explorer both 8 and 9. It works perfectly fine in Chrome and Firefox, and I ran my code through the dataTables debugger here http://debug.datatables.net/ucuvay

Don't see any problems, I'm wondering if anyone has any idea what may be causing the issue?

I verified from the thread I linked to above, that that charset is set correctly in my page header.
[code]

[/code]

My JSON feed is using an IP address as the domain, could this be an issue? (I'm replacing my ajax souce url below with a fake URL for troubleshooting purposes here)

I'm also wondering if there is a function for initialization errors? Like fnInitComplete, but the opposite?

Here is some code (I'm creating a number of custom filters and a lot of other specific features);

[code]
var oTable = $("#players-chart").dataTable({
"sDom": '<"stats-table-top"<"stats-filter">lf>t<"stats-table-bottom"rip>', //Customizes position of filtering and pagination elements.
"bProcessing": true,
"sAjaxSource": '//11.1.11.111:1111/GET/urn:site:section:playerslist.txt', //Players List feed
"sAjaxDataProp": "Players", //Get the Players object
"bDeferRender": true, //Only render current view
"aoColumns": [{ //Choose JSON properties for each column of the table
"mData": "PositionAcronym",
"sClass": "hidden"
}, {
"mData": "Team", //Get the nested Team object
"mRender": function(mData) { //Render a column that contains both the Team Logo and Team Acronym.

if (mData.Logo === undefined) {
return "Free Agent"; //Case for unattached players.
} else {

var logoURL = mData.Logo;
logoURL = logoURL.replace("%s", "24"); //Replace size variables with desired sizing.
logoURL = logoURL.replace("%s", "24");
//console.log(logoURL);

return "" + mData.Acronym + ""; //Return desired HTML and JSON properties.
}
}
}, {
"mData": function(data) { //Return multiple properties for the Player's name as well as desired HTML structure.
return "" + data.FirstName + " " + data.LastName + ", " + data.PositionAcronym + "";
}

}

],
"sPaginationType": "full_numbers", //Type of Pagination
"iDisplayLength": 25, //Number of Entries shown on initial load
"aaSorting": [], //Turns off default sorting of columns
"asStripeClasses": [], //Remove Odd/Even Classes which are added by DataTables
"oLanguage": {
"sSearch": "", //Custom text for Search field
"sLengthMenu": 'Show ' +
'25' +
'50' +
'100' +
'', //Custom text/HTML for Number of Entries dropdown
"sInfo": "Showing _START_ to _END_ of _TOTAL_" //Custom text for Entries info
},
"fnInitComplete": function(oSettings, aData){
//Create a custom filter dropdown menu for Positions
$(".stats-filter").attr("id", "generated-dropdown"); //Add ID for the next command
document.getElementById("generated-dropdown").innerHTML = fnCreatePositionSelect(oTable.fnGetColumnData(0));

//Perform Filter on clicked item
$("#generated-dropdown .filters ul li").click(function() {
if ($(this).attr("id") == "selected") { //Case for clicking All Positions

oTable.fnFilter('', 0); //Resets column filter
oTable.fnDraw(); //Re-draws table
$("#generated-dropdown .filters ul").prepend($(this)); //Sets selected item as top item

} else {

oTable.fnFilter("^" + $(this).attr("id") + "$", 0, true, false); //Filters by position, position string is passed to the ID of each list item in the dropdown.
var allPositions = $("#selected");
$("#generated-dropdown .filters ul").prepend($(this)); //Sets selected item as top item
$(this).after(allPositions); //Puts All Positions as the next item

}

});
}
});
[/code]

allan

> My JSON feed is using an IP address as the domain, could this be an issue?

My guess is yes. You are, I think, running into a cross domain protection issue. How are you getting around that in Firefox etc - are you returning http headers that specifically allow cross domain Ajax? I doubt old IE will support that. You might need a proxy from your local server to the remote one.

> I'm also wondering if there is a function for initialization errors? Like fnInitComplete, but the opposite?

No - just errors on the Javascript console :-)

Allan

jonlewis1

Thanks for the response, the strange thing is I can render backbone js collections using the same feeds with no issue in IE. Makes me think there's something missing in my initialization code. I can get the JSON data if I plug the feed URL into my browser directly as well.

allan

> I can get the JSON data if I plug the feed URL into my browser directly as well.

You would do since that is a same domain source - assuming that it is a cross site scripting issue. The problem is that if your page is at a specific domain, you can't directly load from another (or port).

Are you able to link to the page?

Allan

jonlewis1

Unfortunately I can't link to the page here, I'm not sure that it's a cross site scripting issue. I'm not doing anything different to get the data to render in Firefox.

After loading the page the table just hangs and says Processing... at the top and Loading... inside the table.

I've tried creating another HTML table and rendering the same feed but with basic initiliazation like so;

$("#stats-chart2").dataTable({
"bProcessing": true,
"sAjaxSource": '//10.6.44.150:7379/GET/urn:site:mlb:statistics:regularseason:league:leaders.txt',
"sAjaxDataProp": "Statistics",
"bDeferRender": true
});

This works in Chrome and Firefox, am I missing anything here that IE may require?

allan

No - that should work in IE as well. DataTables requires no specific initialisation for IE.

I'm afraid I really don't know what is causing the problem.

Allan

jonlewis1

Just an update on this, I disable the XSS Filter in IE and still cannot render the table.

allan

Bummer. In that case, I'm afraid I'm completely out of ideas without being able to see it.

Allan

jonlewis1

It was the cross site scripting after all, strange how it still wouldn't work when I turned off the filter in IE? Either way, I was missing a plugin in my project jQuery.XDomain.Request.js which resolves IE's cross domain blocking. There was a disconnect between myself and the other members of my team and they forgot to include it for all the pages in the site. I hate it when it turns out to be such a silly issue. lol Thanks for your help Allan!