JQuery - Using navigator.notification.alert - jquery-mobile

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:
Phonegap/Cordova is not initialized inside a HEAD
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.