CODEWITHSUNDEEP
cordovaphonegap-desktop-app
aDvo
aDvo

Reputation: 904

Phonegap: Button Handlers executing unexpectedly

This is my first phonegap helloworld attempt, and also my first attempt at doing a Single Page Application. In summary, I have a index.html that has a div with id "subscreen". I also have 2 buttons. Each button will load a Handlebar template into that DIV.

Questions: When the moment I start the app, the button handlers get fired immediately in sequence ( i get alert message for screen 1 and screen2). And when i click on the buttons, nothing happens, as if the event bind was not done properly.

Maybe i have an error in my javascript but i can't tell what it is!

Behold my simple index.html:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/handlebars-v3.0.1.js"></script>
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">

            <h1>PhoneGap test</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>


            <div id="subscreen">This is where we display the subscreens created using the handlebar templates below</div>
            <input class='screen1-key' value="Scr1" type="button"/>
            <input class='screen2-key' value="Scr2" type="button"/>

            <script id="scr1" type="text/x-handlebars-template">
                <div class='header'><h1>This is SCREEN 1</h1></div>
            </script>

            <script id="scr2" type="text/x-handlebars-template">
                <div class='header'><h1>This is SCREEN 2</h1></div>
            </script>
        </div>



        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Behold my simple index.js, where i attempt to Handlebar Compile my templates in the initialize function. I then try to bind keyup events to my 2 buttons, which when clicked will load the templates 1 or 2 into a div on the html page.

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();

        //Kev add handlebars stuff
        this.screen1 = Handlebars.compile($("#scr1").html());
        this.screen2 = Handlebars.compile($("#scr2").html());

    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        app.receivedEvent('deviceready');


        $('.screen1-key').on('keyup', app.renderScreen1());
        $('.screen2-key').on('keyup', app.renderScreen2());


    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },

    renderScreen1: function () {
        alert("render screen 1");
        $('#subscreen').html(this.screen1());
    },


    renderScreen2: function () {
        alert("render screen 2");
        data = {name: "Mr Wong"};
        $('#subscreen').html(app.screen2(data));
    }
};

Upvotes: 0

Views: 157

Answers (1)

devconcept
devconcept

Reputation: 3685

This code is triggering the functions

$('.screen1-key').on('keyup', app.renderScreen1());
$('.screen2-key').on('keyup', app.renderScreen2());

You must pass a function reference to the event handler not execute the function itself. Also those inputs are button so you must use the click event handler instead.

$('.screen1-key').on('click', app.renderScreen1);
$('.screen2-key').on('click', app.renderScreen2);

Upvotes: 1

Related Questions