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

Solution 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
   }
   

Solution 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);
        }
    };

Comments

[Gary]

Hi Jonathan, using showMessage works but it still says "localhost" as the from (it is using the else part of the defined function).

[Gary]

Hi Gajotres, I am using this on the browser so Phonegap and Cordova won't have been initialised. I think I may have misunderstood the original thread - I thought that his code would allow the custom alert to appear even when using a browser

[Jonathan Naguin]

@Gary "localhost"? What do you mean? And you cannot use phonegap functions from a desktop/regular browser...

[Gajotres]

navigator.notification will work only if cordova.js is included and only on mobile devices. That's why original post checks if it exist before using it. Also this function will work only on mobile devices, you can use Cordova.js created for desktop browsers but I think it don't have notification function.

[Gajotres]

Basically if you want to use cordova functionalities it must be initialized. Not to mention appropriate version must be initialized, iOS version will not work on windows and vice versa.

[Gary]

Ah thank you. I'll recompile the app as soon as I can (just trying to figure out how to get a certain screen on landscape only). Thank you.

[Gary]

Aye, that's my mistake. Will recompile this as an app and test. Thanks for the help

[Gary]

Hi again, this isn't actually working. I compiled the new app but notifications are still showing from index.html. I have updated the question.

[Gary]

Hi Johnathon, I've tried the above in my phonegap compiled app and it is not working. I updated above. Thank you.