locked
Bug ? Can't create DatePicker from scratch using js only ?

    Question

  • This can creates the DatePicker object :

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test1</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" type="text/css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
        <!-- Test1 references -->
        <link rel="stylesheet" type="text/css" href="css/css/ui-lightness/jquery-ui-1.8.21.custom.css" />
        <link href="default.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <script src="default.js"></script>
    </head>
    
    <body>
        <h1>App H2O</h1>
        <p id="p1">Lorem Ipsum LOREM IPSUM !!!!! LOOREM IPSUUUM.</p>
        
    
        <div id="div1"></div>
    </body>
    </html>
    


    default.js :

    (function () {
    
        WinJS.strictProcessing();
    
        WinJS.Application.onactivated = function (args) {
    
            if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
    
                if (args.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
    
                    // TODO: This application has been newly launched.
                   
                   
    
                    WinJS.Utilities.ready(function () {
    
                        // Create a DatePicker from scratch using js
                        var datePicker = new WinJS.UI.DatePicker($('#div1')[0]);
    
                    });
    
                    
                } else {
    
                    // This application has been reactivated from suspension. Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        WinJS.Application.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().
        };
    
        WinJS.Application.start();
    
    })();
    

    But this CAN NOT create DatePicker object, why ?

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test1</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" type="text/css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
        <!-- Test1 references -->
        <link rel="stylesheet" type="text/css" href="css/css/ui-lightness/jquery-ui-1.8.21.custom.css" />
        <link href="default.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <script src="default.js"></script>
    </head>
    
    <body>
        <h1>App H2O</h1>
        <p id="p1">Lorem Ipsum LOREM IPSUM !!!!! LOOREM IPSUUUM.</p>
        
    
        <div id="div1"></div>
    </body>
    </html>
    

    default.js :

    (function () {
    
        WinJS.strictProcessing();
    
        WinJS.Application.onactivated = function (args) {
    
            if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
    
                if (args.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
    
                    // TODO: This application has been newly launched.
                   
                   
    
                    WinJS.Utilities.ready(function () {
    
                        // Create a DatePicker from scratch using js, success
                        var datePicker = new WinJS.UI.DatePicker($('#div1')[0]);
    
                        // Create a DatePicker from scratch using js + html (using js), FAILED !!!! WHY ?
                        $('<div id="2"></div>').appendTo('body');
                        var datePicker2 = new WinJS.UI.DatePicker($('#div2')[0]);
                    });
    
                    
                } else {
    
                    // This application has been reactivated from suspension. Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        WinJS.Application.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().
        };
    
        WinJS.Application.start();
    
    })();
    

    Monday, June 18, 2012 11:54 PM

Answers

  • No, look at your code.

    You are creating a div with the id of '2'.

    Then you are trying to find a div with the id of 'div2'.  This will fail!


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 1:09 PM
    Moderator

All replies

  • Because you don't have any element in the DOM called "div2".

    You have to have something with the id in your DOM in order to create a control from it!


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 12:38 PM
    Moderator
  • No no, i created div id=2 dynamically, notice inside

    WinJS.Utilities.ready

    is :

    // Create a DatePicker from scratch using js, FAILED !!!! WHY ?
    $('<div id="2"></div>').appendTo('body');
    datePicker2 = new WinJS.UI.DatePicker($('#div2')[0]);

    ^ after

    // Create a DatePicker from scratch using js + HTML, success
    var datePicker = new WinJS.UI.DatePicker($('#div1')[0]);

    It DOES work if i added <div id="div2"></div> directly on the HTML, but what i wanted is make it purely from javascript without addiing elements to the DOM



    Tuesday, June 19, 2012 12:52 PM
  • No, look at your code.

    You are creating a div with the id of '2'.

    Then you are trying to find a div with the id of 'div2'.  This will fail!


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 1:09 PM
    Moderator
  • *face palm*

    Thanks !


    Tuesday, June 19, 2012 1:14 PM
  • Sometimes it is the easy answer :D

    You are welcome!


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 1:16 PM
    Moderator