locked
JavaScript functions not firing RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    Hello, 
    unfortunatly I am having a serious problem with JavaScript functions not working as intended. I have a very simple page and in this case I just want a button to start a js function, but it is not working. Every now and then it works for one function, but most times none of those works. Could someone provide a helpful solution? 
    Thank you very much in advance.
    HTML: 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>newEntry</title>
    
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-light.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/binding.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <script src="/winjs/js/animations.js"></script>
    <script src="/winjs/js/uicollections.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/res.js"></script>

    <link rel="stylesheet" href="/css/default.css" />
    <link rel="stylesheet" href="/css/newEntry.css" />
    <script src="/js/newEntry.js"></script>
    <script src="/js/data.js"></script>
</head>


<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment newEntry">
        <header role="banner" aria-label="Header content">
            <button disabled class="win-backbutton" aria-label="Back"></button>
            <div class="titleArea">
                <h1 class="pageTitle win-title">New Entry</h1>
            </div>
        </header>
        <section role="main" aria-label="Main content">
            <p id="notification"></p>

            <textarea id="editor"></textarea> <br />

            <button id="reset" type="reset" onclick="resetEntry();">Reset</button>
            <button id="save" data-win-control="" type="submit" onclick="saveEntry();">Submit</button>


            <p id="demo">This is a paragraph.</p>

            <button type="button" onclick="displayDate();">Display Date</button>


        </section>
    </div>
</body>
</html>


    JAVASCRIPT: 
      
     function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    };

    function saveEntry() {
        document.getElementById("notification").innerHTML = "Wird gespeichert..";
    };

    function resetEntry() {
        document.getElementById("notification").innerHTML = "Wird resettet...";
    };

    WinJS.Namespace.define('newEntry', {
        displayDate: displayDate,
        saveEntry: saveEntry,
        resetEntry: resetEntry,
    });
    Sunday, January 8, 2012 2:15 AM

Answers

  • Question
    Sign in to vote
    1
    Sign in to vote

    Hi Jarood,

    You were so close!  You simply need to add the name space qualifier to your function names in the HTML.  JavaScript has a neat capability to hide function names to prevent namespace collision and only expose the functions you require.  This is accomplished by the anonymous function declaration in your .js file "function(){

    }" .  You correctly exposed your desired functions in the 'newEntry' namespace in your above code, now you simply need to qualify that namespace in your HTML like this:

    <button id="reset" type="reset" onclick="newEntry.resetEntry();">Reset</button>
<button id="save" data-win-control="" type="submit" onclick="newEntry.saveEntry();">Submit</button>

    <button type="button" onclick="newEntry.displayDate();">Display Date</button>

    Make sense?

     

    -Jeff

    Jeff Sanders (MSFT)
    Monday, January 9, 2012 1:58 PM
    Moderator

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    Where is the JS code in? "newEntry.js" or "data.js"?

    What is the mean "Every now and then it works for one function", which function?

    Do you define the functions out of the default function in the JS file.

    A simple sample:

    default.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinWebApp1</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button onclick="done();">
        Button</button>
</body>
</html>

     

    default.js:

    (function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: startup code here
        }
    }

    WinJS.Application.start();
})();

function done() {
    var text = "testing";
};

    How about yours?

    Sincerely,

     

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Monday, January 9, 2012 7:33 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    And try to use below solution:

    <button id="button">Button</button>

    Javascript:

    (function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: startup code here

            document.getElementById("button").addEventListener("click",
            function () {
                //TO DO...
            });
        }
    }

    WinJS.Application.start();
})();

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Monday, January 9, 2012 7:38 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Thank you for your help. Unfortunatly it did not solve my issue. In my original example I set breakpoints for each js function. When opening the newEntry.html from the appbar now and then one of the breakpoints worked upon first use of one of the buttons, other times none worked. 

    Now I created a new project (blank js application) and tested both of your examples and neither of them worked. Any guess on what might be the reason? I am really confused right now, since the application javascript (if I create a grid layout for instance) is working just fine. Is there some setup/configuration/reference I forgot? 

    Thank you in advance. 

    Monday, January 9, 2012 9:29 AM
  • Question
    Sign in to vote
    1
    Sign in to vote

    Hi Jarood,

    You were so close!  You simply need to add the name space qualifier to your function names in the HTML.  JavaScript has a neat capability to hide function names to prevent namespace collision and only expose the functions you require.  This is accomplished by the anonymous function declaration in your .js file "function(){

    }" .  You correctly exposed your desired functions in the 'newEntry' namespace in your above code, now you simply need to qualify that namespace in your HTML like this:

    <button id="reset" type="reset" onclick="newEntry.resetEntry();">Reset</button>
<button id="save" data-win-control="" type="submit" onclick="newEntry.saveEntry();">Submit</button>

    <button type="button" onclick="newEntry.displayDate();">Display Date</button>

    Make sense?

     

    -Jeff

    Jeff Sanders (MSFT)
    Monday, January 9, 2012 1:58 PM
    Moderator