Phonegap 3.3.0 + jquery onclick not working

Question

I am using phonegap 3.3.0.0.19.6 on a Windows 8 platform. I have Nexus 7 connected via usb to test my app.

I have issue invoking any javascript code using onclick. I have tried to display a simple alert box, which doesn't work. I have then followed the phonegap tutorial:

http://docs.phonegap.com/en/3.0.0/cordova_notification_notification.md.html

I have found similar questions within the following links. However the solutions within these posts, do not answer my current issue with phonegap.

How to fix onclick in Phonegap/Android especially in lower versions of Android?

Android/ Phonegap - onClick() not working

Everything worked ok when I tried triggering a standard alert box in chrome. However, when I deploy to Nexus, no dialog box was displayed.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-   scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
<title>Example Page</title>
<link rel="stylesheet" href="../www/css/themes/default/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="../www/css/themes/default/jqm-demos.css">
<link rel="shortcut icon" href="../www/favicon.ico">
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //wait for device api libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device apis are available
    function onDeviceReady() {
       // empty
    }
    function showAlert() {
      navigator.notification.alert(
       'Message box please display....', // message
       altertDismissed,             // no callback
       'Message Box Title',         // title
       'Continue'                   // button texr
    );
    }
 </script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
    <p><a href="#" data-inline="button" data-role="button" data-ajax="false" onclick="showAlert(); return false;">Show Alert</a></p>
</div><!-- /content -->

</div><!-- /page -->
</div><!-- /textWrapper -->
</body>
</html>

I have used plugman to install to install the plugin

plugman install --platform android --project example --plugin org.apache.cordova.dialogs

The nexus is running Android 4.4.2

At the moment I can not trigger any javascript code using onclick.

A solution using the native alert box or the standard alert message box would answer my question.

Thanks in advance

declare the "altertDismissed" function. now try. – Aravin Mar 06 '14 at 13:07 — Aravin, Mar 06 '14 at 13:07

Aravin · Accepted Answer · 2014-03-06T15:26:33.287

Try this one it will work

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf-  8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //wait for device api libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device apis are available
    function onDeviceReady() {
       // empty
    }
    function showAlert() {
      navigator.notification.alert(
       'Message box please display....', // message
       altertDismissed,             // no callback
       'Message Box Title',         // title
       'Continue'                   // button texr
    );
    }
    function  altertDismissed(){
       navigator.notification.alert("alert box is dismissed");
    }
 </script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
    <p><a href="#" data-inline="button" data-role="button" data-ajax="false" onclick="showAlert(); return false;">Show Alert</a></p>
</div><!-- /content -->

</div><!-- /page -->
</div><!-- /textWrapper -->
</body>


</html>

just copy this and replace it will work.

Well spotted Arvainth I made some mistakes referencing javascript libraries. I have copied the code and no alert box is displayed on the nexus. I have changed ShowAlert() to a simple alert('Hello World'); still no alert box on nexus. Alert box appears ok using serve in chrome. Is this a permission problem with my manifest file? — BarryAdmin, Mar 06 '14 at 15:10
i tested in my nexus device it shows alert.Any errors shown? in stacktrace. — Aravin, Mar 06 '14 at 15:11
Thankyou Arvainth - Got the example page to work. You were correct, the problem was caused by the javascript references. I could not get the inline javascript to work. I changed the code to an external javascript file and the javascript was triggered. Used the debugger under chrome->device tools->inspect devices to identify the js function was undefined using inline syntax. — BarryAdmin, Mar 06 '14 at 23:11
you may want to bind to the `tap` or `touchstart` event instead. They perform much faster on mobile devices than `click` — Anthony Elliott, Mar 07 '14 at 02:24

Phonegap 3.3.0 + jquery onclick not working

1 Answers1