Support for Windows 8 Store applications in Javascript

hotstack

The following code throws an error due to Windows 8 's restrictions on injecting dynamic content:

[code]
$('#outputtable').dataTable({
"aaData": arrayData,
"aoColumns": [
{ "sTitle": "ID" },
{ "sTitle": "Date" },
{ "sTitle": "Type" },
{ "sTitle": "SubType" },
{ "sTitle": "Value" },
{ "sTitle": "Notes" }
]
});
[/code]

The error thrown is:
[code]
HTML1701: Unable to add dynamic content

A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.

For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
[/code]

I really like the product and thought it would be better than me trying to roll my own... it may also be impossible or more trouble than it is worth though.


This was fixed a few revs back in JQuery though, so maybe it could also be done here? If I was a bit better at this I would give it a shot myself, but I am still pretty n00bish.

Thanks

allan

You'll need to provide us with a link to the page you are working on. DataTables should work just fine in Windows 8 store applications. DOM elements can be inserted, as I understand it, but not script tags - that's fine - DataTables doesn't do that. So we'd need a test showing the issue.

Allan

hotstack

Sorry for the delay. I don't have a page really. Is there some way to post a project? I can try to cut everything out and see if that works.

It could very well be something I am doing wrong.

In the above section, pretty sure this doesn't matter, but arrayData is a 2-dimension array that is filled from an imported csv file
[code]
var arrayData= [
[1, '1/1/2013', 'measurement', 'glucose', 123, 'none'],
[2, '1/2/2013', 'measurement', 'glucose', 87, 'none'],
[3, '1/2/2013', 'measurement', 'glucose', 104, 'none'],
[4, '1/3/2013', 'measurement', 'glucose', 213, 'none'],
[5, '1/3/2013', 'measurement', 'glucose', 78, 'none']
];
[/code]

The HTML looks like this:

[code]
<!-- Jquery and dataTables -->




@import "/css/demo_table.css";


<!-- snip -->


<!-- Show imported data here -->


[/code]

allan

Sorry - I don't have access to a Windows 8 machine at the moment.

Allan

hotstack

Thanks Allan.

Hmm, I tried to post the full code, but it got flagged for moderation. Sorry, I am obviously pretty new to this. Maybe it will show up after a mod looks at it.

Here is where Windows 8 is complaining if that helps any:

[code]
/* Built our DOM structure - replace the holding div with what we want */
nHolding.parentNode.replaceChild( oSettings.nTableWrapper, nHolding );
[/code]

Error message is the same:

Exception is about to be caught by JavaScript library code at line 1763, column 4 in ms-appx://400bda14-af30-45fb-ae54-645717522a42/js/jquery.dataTables.js

0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

If there is a handler for this exception, the program may be safely continued.

hotstack

I think I figured it out... it is injecting dynamic content into the DOM... if others are having this issue, try this:

Wrap it in a "MSApp.execUnsafeLocalFunction" function (which will inject dynamic content via innerHTML).

[code]
MSApp.execUnsafeLocalFunction(function () {
$(document).ready(function () {
$('#outputtable').dataTable({
"aaData": arrayData,
"aoColumns": [
{ "sTitle": "ID" },
{ "sTitle": "Date" },
{ "sTitle": "Type" },
{ "sTitle": "SubType" },
{ "sTitle": "Value" },
{ "sTitle": "Notes" }
]
});
});
});
[/code]

This worked for me on a very simple example.

Thanks!

allan

Very odd. Do you have DOM0 event handlers or tags in your table? I'd be very surprised if you couldn't manipulate the DOM like DataTables is doing them. That's fundamental.

Allan

hotstack

No tags in my table.. very basic, from the getting started page.

The only event handlers that I have added are on a button with a document.getElementById('button').onclick= somefunction


I will keep playing with it though.

Thanks for the help.

allan

Have you tried an extremely basic table - no DOM0 events (your onclick) - something with with only DataTables? Does that work?

Allan