JQuery - Using navigator.notification.alert

Question

I have a requirement for a popup to appear with a custom heading (having it appear from index.html on an app just looks tacky).

I tried the suggestion at the end of the following link:

Custom JavaScript alerts in iOS using PhoneGap HTML

So I added the code below to my index.html in the script section:

   function showMessage(message, callback, title, buttonName){

        title = title || "default title";
        buttonName = buttonName || 'OK';

        if(navigator.notification && navigator.notification.alert){

            navigator.notification.alert(
                message,    // message
                callback,   // callback
                title,      // title
                buttonName  // buttonName
            );

        }else{

            alert(message);
            callback();
        }

    }

UPDATE

I have the following code for the alert;

if ((inputNumber>maxAllowed))
        {
        showMessage("The input is too high.",null,"Warning","Warning");
        }

After compiling the app, this is not working.

The following is in index.html:

    document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady() {
            // Now safe to use the PhoneGap API
            }

<function shown above is here>

Any idea why this is still not working? Showing from index.html

Thank you.

Kind Regards,

Gary Shergill

Answer 1

This error tells you that function navigator.notification don't exist.

Usually this is because:

1. Phonegap/Cordova is not initialized inside a HEAD

2. Function is not initialized inside a deviceready event. Basically function can't be called before cordova.js is fully initialized.

   document.addEventListener("deviceready", onDeviceReady, false);
   
   function onDeviceReady() {
       // Now safe to use the PhoneGap API
   }
   

Answer 2

Here is a function I use while testing Phonegap applications on my PC. I remove it when deploying app on mobile device. It's for confirm function, but you can adjust it for alerting and so on.

    // TODO: remove on deploy
    navigator.notification = {
        confirm: function (message, successCallback) {
            successCallback(1);
        }
    };

Answer 3

You are testing in a browser so navigator.notification is undefined. Also It seems that you added the function showMessage but you are not using it. Try with:

showMessage("The value is too high!", null,"Warning", "Warning");

Answer 4

From phone, notice that the callback is not a string. So in your function, you pass it a string and that is causing it a problem.

http://docs.phonegap.com/en/1.0.0/phonegap_notification_notification.md.html

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

I see this is the case because I am trying to do this also. So unfortunately you cannot override the callback, and you need to "hard Code" it.

Answer 5

I have add the plugin using CLI like :

$ cordova plugin add cordova-plugin-dialogs

and its working fine for me.