Search code examples
javascriptcordovacordova-pluginsvisual-studio-cordovaonsen-ui

Uncaught TypeError: Cannot read property 'appendChild' of null with onsen ui

I'm trying to combine the functionality of onsen ui navigation with QR Code Generator in order to obtain the functionality of QR Code Generator inside <ons-template> element (onsen ui elements), like so:

index.html

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link href="css/onsenui.css" rel="stylesheet" />
        <link href="css/onsen-css-components.css" rel="stylesheet" />


        <title>Turism2</title>
    </head>
<body>
    <!-- App layout -->
    <ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
    <ons-template id="page1.html">
        <ons-page id="page1">
            <ons-toolbar>
                <div class="center">Page 1</div>
            </ons-toolbar>
            <p>This is the first page.</p>
            <ons-button id="push-button">Push page</ons-button>

            <ons-button modifier="large--cta" onclick="makeCode()">
                Tap Me
            </ons-button>

            <input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" /><br />
            <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
        </ons-page>
    </ons-template>
    <ons-template id="page2.html">
        <ons-page id="page2" >
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center"></div>
            </ons-toolbar>
            <p>This is the second page.</p>
    </ons-page>
    </ons-template> 
    <script src="scripts/jquery-3.1.0.min.js"></script>
    <script src="scripts/qrcode.js"></script>
    <script src="scripts/onsenui.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>

index.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.

    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
})();

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 100,
    height: 100
});

function makeCode() {
    var elText = document.getElementById("text");

    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    console.log("Calculare QR");
    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            console.log("Apasar ENTER");
            makeCode();
        }
    });

And the output: My output

I have tried already to move the files <script src="scripts/jquery-3.1.0.min.js"></script> and <script src="scripts/qrcode.js"></script> to the header location tag, and it works only for 1 second.

Please help, I can't figure out what am i doing wrong.

Solution

  • Hey I just figured out what was wrong. My script runs before the DOM has been loaded. To fix this I used:

    window.onload = function () {
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100
    });

    function makeCode() {
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        console.log("Calculare QR");
        qrcode.makeCode(elText.value);
    }

    makeCode();

    $("#text").
        on("blur", function () {
            makeCode();
        }).
        on("keydown", function (e) {
            if (e.keyCode == 13) {
                console.log("Apasar ENTER");
                makeCode();
            }
        });
};