Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

phonegap navigator.notification.alert doesn't work

The title is self explanatory, I ca't figure out why tho.

sources: www/index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <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" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

index.js:

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // 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);

        navigator.notification.alert('PhoneGap Alert', null, 'Title', 'Button');
    }
};

config.xml in android/res/xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.helloCordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name>Hello Cordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App" />
    </feature>
    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.Notification" />
    </feature>
    <access origin="http://127.0.0.1*" />
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="permissions" value="none" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="8" />
    <preference name="android-installLocation" value="auto" />
</widget>

and androidmanifest.xml:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="1.0.0" android:windowSoftInputMode="adjustPan" package="com.acs.acs_mobile" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <application android:debuggable="true" android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="main" android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" />
</manifest>

I'm trying to figure out why it doesn't work with no luck for the past hours. I'm realtivley new to phonegap so please If I'm missing something let me know...

PS. Phonegap -version : 3.0.0-0.14.3 , device sdk 8 , AVD sdk 8 (both same result)

Update after wrapping the code inside a try catch I got this error message:

result of expression 'navigator.notification' undefined is not an object

AS mentioned in PhoneGap sample application for android does not work and navigator.notification.* fails "navigator.notification [undefined] is not an object"

The cause is : Likely the name of phonegap*js or cordova*js in your index.html does not match the file name in the assets/www directory. but I only have phonegap.js and cordova.js in platforms/android/assets/www and I'm including with the exact same name... Still can't figure this out...

UPDATE

If I do a remote build the app is working ok with local build it doesn;t altho I have installed the plugins as mentioned for version 3

like image 343
0x_Anakin Avatar asked Sep 16 '13 12:09

0x_Anakin


3 Answers

I built your project using Cordova CLI 3.0.9, using the command line tools and following the docs listed here (http://cordova.apache.org/docs/en/edge/cordova_notification_notification.md.html#Notification). I used your HTML and JS code and the dialog popped up just fine.

When looking through the other files, I noticed a difference in config.xml; my config.xml looks like this:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.helloCordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name>Hello Cordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App" />
    </feature>
    <feature name="Vibration">
        <param name="android-package" value="org.apache.cordova.vibration.Vibration" />
    </feature>
    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.dialogs.Notification" />
    </feature>
    <access origin="*" />
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
</widget>

Notice that mine has org.apache.cordova.dialogs.Notification - yours is missing the dialogs namespace for some reason. Is this on purpose? If you add "dialogs" namespace, does it work? What about if you rebuild using the latest CLI version?

like image 141
MBillau Avatar answered Nov 04 '22 09:11

MBillau


All that you have to do is add this feature to your project... Stand up con the phonegap project folder (not the platform folder), for example: cd MobileAplications/MyPhoneGapExample then, add the plugin (I installed cordova instead off phonegap, so I suposed if you install phonegap you have to use the "phonegap" command): cordova plugin add org.apache.cordova.dialogs

I hope it works for you!!

PD: If someone dont know whats the difference between the platform folder and the project folder, here is the document that can show the difference: http://docs.phonegap.com/en/3.2.0/guide_cli_index.md.html#The%20Command-Line%20Interface

like image 39
Jessica Avatar answered Nov 04 '22 11:11

Jessica


I am using visual studio 2015, and I solved this problem by adding the Notification plugin.

Double click your config.xml in your poject, and select Notification plugin and install.

enter image description here

like image 2
Luo Lei Avatar answered Nov 04 '22 09:11

Luo Lei