locked
Using jQuery .HTML - Unable to add dynamic content

    Question

  • Hi all,

    I have some simple HTML fields and am attempting to show a calculation on click. However, the "Unable to add dynamic content" is getting thrown despite using "toStaticHTML". Am I missing something obvious?

    Here is my HTML

    <body>
        <p>Budget Calculation</p>
        <form>
            <fieldset>
                Income: <input id="income" type="number" name="income">
                Expense: <input id="expense" type="number" name="expense">
                <button id="calculate">Calculate</button>
            </fieldset>
        </form>
        <div id="result"></div>
    </body>
     

    Here is my jQuery

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
        app.start();
    
        // Calculate budget
        function calculate() {
            var income = $('#income').val();
            var expense = $('#expense').val();
            var remaining = income - expense;
            $('#result').html(toStaticHTML("<b>Income:</b> " + income + " <b>Expense:</b> " + expense + " <b>Remaining:</b> " + remaining));
        }
        $('#calculate').click(function () {
            calculate();
        });
    
    })();


    Personal Blog: http://thebitsthatbyte.com

    Sunday, February 2, 2014 3:29 AM

Answers

  • Hi Kelly,

    I would suggest you to read this: Quickstart: Adding HTML controls and handling events

    You may use following code instead of JQuery add click function $('#calculate').click(function () {...}:

                args.setPromise(WinJS.UI.processAll().done(function () {
                    var button = document.getElementById("calculate");
                    button.addEventListener("click", calculate, false);
                }));

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, February 3, 2014 2:14 AM
    Moderator
  • Hi Kelly,

    Of course you can, JQuery is supported, the reason is you put the code in a wrong place. Try with following code, it does use JQuery to append a function to a button click event and works fine.

                args.setPromise(WinJS.UI.processAll().done(function () {
                    //var button = document.getElementById("calculate");
                    //button.addEventListener("click", calculate, false);
                    $('#calculate').click(function () { calculate(); });
                }));

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, February 3, 2014 5:00 AM
    Moderator
  • Hi Kelly,

    I think that is my coding habit, just put the code inside onactivated should be fine.

    app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                  ...your code here...
             }
    }
    

    Take a look at Step 5 of this tutorial, a more clear explanation is provided: http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx#step5_register_event_handler

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, February 5, 2014 6:58 AM
    Moderator

All replies

  • Hi all,

    I have some simple HTML fields and am attempting to show a calculation on click. However, the "Unable to add dynamic content" is getting thrown despite using "toStaticHTML". Am I missing something obvious?

    Here is my HTML

    <body>
        <p>Budget Calculation</p>
        <form>
            <fieldset>
                Income: <input id="income" type="number" name="income">
                Expense: <input id="expense" type="number" name="expense">
                <button id="calculate">Calculate</button>
            </fieldset>
        </form>
        <div id="result"></div>
    </body>
     

    Here is my jQuery

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
        app.start();
    
        // Calculate budget
        function calculate() {
            var income = $('#income').val();
            var expense = $('#expense').val();
            var remaining = income - expense;
            $('#result').html(toStaticHTML("<b>Income:</b> " + income + " <b>Expense:</b> " + expense + " <b>Remaining:</b> " + remaining));
        }
        $('#calculate').click(function () {
            calculate();
        });
    
    })();


    Personal Blog: http://thebitsthatbyte.com

    Sunday, February 2, 2014 3:29 AM
  • Hi Kelly,

    I would suggest you to read this: Quickstart: Adding HTML controls and handling events

    You may use following code instead of JQuery add click function $('#calculate').click(function () {...}:

                args.setPromise(WinJS.UI.processAll().done(function () {
                    var button = document.getElementById("calculate");
                    button.addEventListener("click", calculate, false);
                }));

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, February 3, 2014 2:14 AM
    Moderator
  • Thanks James,

    I would really like to leverage the power of jQuery. The documentation I have seen said jQuery .html and .append are supported via the toStaticHTML reference. Do you know why I get the error when using jQuery?

    Kelly


    Personal Blog: http://thebitsthatbyte.com

    Monday, February 3, 2014 4:20 AM
  • Hi Kelly,

    Of course you can, JQuery is supported, the reason is you put the code in a wrong place. Try with following code, it does use JQuery to append a function to a button click event and works fine.

                args.setPromise(WinJS.UI.processAll().done(function () {
                    //var button = document.getElementById("calculate");
                    //button.addEventListener("click", calculate, false);
                    $('#calculate').click(function () { calculate(); });
                }));

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, February 3, 2014 5:00 AM
    Moderator
  • Thanks Jamles.

    Should all my functions live within the setPromise? What generally is placed after the app.start? I will research the link you sent and get my learning up on Windows App development.

    Regards,

    Kelly


    Personal Blog: http://thebitsthatbyte.com

    Monday, February 3, 2014 10:56 PM
  • Hi Kelly,

    I think that is my coding habit, just put the code inside onactivated should be fine.

    app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                  ...your code here...
             }
    }
    

    Take a look at Step 5 of this tutorial, a more clear explanation is provided: http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx#step5_register_event_handler

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, February 5, 2014 6:58 AM
    Moderator
  • Thank you Jamles.

    Personal Blog: http://thebitsthatbyte.com

    Wednesday, February 5, 2014 1:03 PM