locked
Adding dynamic content with jquery RRS feed

  • Question

  • I'm writing a metro app using jquery to handle json. Pulling in the json data works fine (after adding a little jQuery.support.cors = true; that is), I'm able to whip up a string containing my html, but when I try to drop it into the dom using html() I get the following:

    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 or the document.write method to add a script element will generate this exception. If the content is safe and from a trusted source, use a method to explicitly manipulate elements and attributes, such as createElement, or use msWWA.execUnsafeLocalFunction.

    I've tried to use execUnsafeLocalFunction and createElement but have yet to get the hang of either syntax within metro. Can anyone provide a working example or explain the best way to add html dynamically with javascript/jquery?

    Wednesday, September 28, 2011 5:39 PM

Answers

  • It'd be interesting if you could determine what markup is causing the exception. (I'm assuming you're not putting inline JavaScript into your HTML.) One good way of narrowing this down is to run it through toStaticHTML and see what gets stripped out:

     

    toStaticHTML("<p>blah</p>");
    

    If something is being removed that shouldn't, you should feel free to file a bug through Connect. A known issue is data- attributes aren't currently accepted as "safe".

    A simple workaround, as you mentioned, is to use execUnsafeLocalFunction().

    msWWA.execUnsafeLocalFunction(function () {
        $("#content").html("<p data-foo='bar'>blah</p>");
    });
    

    Cheers,

    -Jeff

    Wednesday, September 28, 2011 5:56 PM

All replies

  • It'd be interesting if you could determine what markup is causing the exception. (I'm assuming you're not putting inline JavaScript into your HTML.) One good way of narrowing this down is to run it through toStaticHTML and see what gets stripped out:

     

    toStaticHTML("<p>blah</p>");
    

    If something is being removed that shouldn't, you should feel free to file a bug through Connect. A known issue is data- attributes aren't currently accepted as "safe".

    A simple workaround, as you mentioned, is to use execUnsafeLocalFunction().

    msWWA.execUnsafeLocalFunction(function () {
        $("#content").html("<p data-foo='bar'>blah</p>");
    });
    

    Cheers,

    -Jeff

    Wednesday, September 28, 2011 5:56 PM
  • Jeff-

    Turns out it's not the html that's the problem but rather a custom data attribute. If I try

    var div = document.createElement("div");
    div.id = "gridWrap";
    div.innerHTML = '<div class="figWrap" data-url="http://science.howstuffworks.com/dead-animals-in-space.htm"><figure><img src="http://static.howstuffworks.com/gif/dead-animals-in-space-ch150.jpg" width="150" height="150" /><figcaption>Why are there dozens of dead animals floating in space?</figcaption></figure></div>';
    appBody.appendChild(div);

    I get the 'Unable to add dynamic content...' error. If I remove the data-url attribute everything works fine. However, your workaround works great. Thanks for the help!

    Wednesday, September 28, 2011 6:09 PM