Cannot render JSON in IE, Ajax source Client-side
Cannot render JSON in IE, Ajax source Client-side
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]
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]
This discussion has been closed.
Replies
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
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
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?
I'm afraid I really don't know what is causing the problem.
Allan
Allan