JQuery + PhoneGap - Custom Notification Alerts

Question

I've been spending some time trying to find out why I can't get my custom notifications on my app to work.

Below is the code in my .js:

if (inputOne > maxAllowed)
{
     showMessage("Your Input is too high.",null,"Warning","Warning");
}

Below is the code in my .html:

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

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

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

    title = title || "Warning!";
    buttonName = buttonName || 'Warning!';

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

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

     } else {
          alert(message);
     }

In my config.xml for PhoneGap I have:

Below is the link I was using to get this:

http://docs.phonegap.com/en/2.9.0/cordova_notification_notification.md.html#Notification

What happens is, it just uses the else part and works normally.

The .html is from the below link:

Custom JavaScript alerts in iOS using PhoneGap HTML

Any ideas please?

Thank you, any help is appreciated.

Kind Regards,

Gary Shergill

Answer 1

For anyone else seeing this issue, you need to add the following in the index.html:

<!-- Add PhoneGap library -->
<script type="text/javascript" src="phonegap.js"></script>

Good luck!