CODEWITHSUNDEEP
jquerycordovanetbeans
Priyabrata
Priyabrata

Reputation: 1232

Cordova application throws exception in Netbeans

I am writing a tic-tac-toe as my first cordova application with netbeans.

I am using jQuery Mobile and I've designed the rough UI.

Here is the source for the UI :

<!--
                        Menu Page
-->
<div data-role = "page" data-theme="b" id="MenuPage">
    <div data-role = "header" data-theme="b">
        <h2 class = "Title">Tic-Tac-Toe</h2>
    </div>
    <div data-role = "main-page" data-theme="b">
        <div data-role="controlgroup" data-type="vertical">
            <a href="#BoardPage" data-role="button" data-theme="b">Single Player</a>
            <a href="#" data-role="button" data-theme="b">Multi Player</a>
            <a href="#" data-role="button" data-theme="b">Leader Board</a>
            <a href="#" data-role="button" data-theme="b">About</a>
            <a href="#" data-role="button" data-theme="b" id="btnExit">Exit</a>
        </div>
    </div>
</div>


<!--
                        Board Page
-->
<div data-role="page" data-theme="b" id="BoardPage">
    <div data-role="main-page" data-theme="b" id = "tabHolder">
        <div data-role="content">
            <center>
                <div class="ui-grid-b" style="position: absolute; top: 38%; width:100%; margin-left:-1em">
                    <div class="ui-block-b">
                        <a data-role="button" id="b1"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b2"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b3"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b4"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b5"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b6"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b7"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b8"></a>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" id="b9"></a>
                    </div>
                </div>
            </center>
        </div>
    </div>
</div>

I've an exit button there, and I want to exit the application on clicking that button.

My Code :

<script>
    $(document).on('pageinit', '#MenuPage', function(events){
        $(document).on('click', '#btnExit', function(event){
            navigator.app.exitApp();
        });
    });
</script>

In response I get the following exception in netbeans :

Uncaught TypeError: Cannot call method 'exitApp' of undefined

I've tried googling this, but nothing seem'd to work.

Looking for some help.

Upvotes: 0

Views: 83

Answers (2)

AtanuCSE
AtanuCSE

Reputation: 8940

Add this before script

<script type="text/javascript" src="cordova.js"></script>

If it still fails, try this

navigator.device.exitApp();

Upvotes: 1

frank
frank

Reputation: 3330

Are you clicking the exit button as soon as you see the app on your mobile?
You need to wait for the deviceReady event before calling the exitApp method
What you can do is Display the menu after the device ready event is fired. e.g

<style>
   #MenuPage {
    visibility:hidden;
   }
<style>
<script>
document.addEventListener("deviceready",displayMenu,false);
function displayMenu () {
  alert("Displaying Menu...");
  document.getElementById("MenuPage").style.visibility="visible";
}
</script>

Upvotes: 1

Related Questions