How to use the native Alert dialog in PhoneGap

PhoneGap's custom alert notification is nicely customizable
PhoneGap's custom alert notification is nicely customizable

An important part to any application is issuing a simple alert to your user. Whether it’s to tell them about an error that just occurred, or if you need to ask them a simple question, giving a message to your user is about the most basic part of any app.

Sadly, when you try to rely on the ever faithful “alert()” function in JavaScript inside a PhoneGap application, you’ll notice the alert box it shows is titled with a very unprofessional “index.html” across the top. Not only does it make it obvious that the app they’re interacting with is actually HTML-based, but you can’t convey the importance of one message or another with a title. Most people only ever read the title anyway, so in order to provide this capability to your application, PhoneGap has an answer for this problem.

Inside PhoneGap there’s a class called “Notification” which is used for, well, sending notifications to your user. And, by calling:

navigator.notification.alert(
  message,
  title,
  buttons...,
  options);

Everything, except for the message, is optional. The more arguments you provide, the more you can customize the alert box. For instance, if you don’t supply a button label, one single “OK” button will be created. Want to ask a Yes/No question? Simply pass two labels for their respective button names.

Like other functions in PhoneGap, the alert notification can be passed an “options” object that allows you to give it more information, such as an onClick callback.

https://nachbaur.com/wp-content/uploads/2009/10/212064.js

That example shows how to ask your user what to do in the event of an Internet connection problem.  You’ll notice that I’ve decided to pass two button labels.  In the onClick callback function I supplied in my options argument, I’m checking the “buttonIndex” variable it passes.  This tells your function which button was pressed.  If you want more than 2 buttons, just list multiple labels and it will show as many as can fit on the screen.

A very simple function, but invaluable as a developer resource.  And, more importantly, a very easy and professional way to get feedback from your user.

14 thoughts on “How to use the native Alert dialog in PhoneGap

  1. Can we have more informations?

    Doesn’t work for me, on PhoneGap 0.8.0 and Simulator (not tested on device). It doesn’t take the 2nd button label and the onClose doesn’t seem to work.

    (just add phonegap.js in the header and use jqtouch)

    any idea?

    Txs

    Like

  2. Yes, I’ve spent the past week sick and haven’t been doing anything with my blog.

    My blog describes the custom work I’ve been doing on my branch of PhoneGap at http://github.com/NachoMan/phonegap which will eventually be merged back into the main codebase. As you may have noticed, there has been some work done recently by the folks at Nitobi to make PhoneGap’s architecture pluggable (see http://blogs.nitobi.com/jesse/2009/10/27/iphonegap/) which would allow my UI additions to be a drop-in plugin.

    Like

  3. That is a perfect answer. Didn’t know about the PhoneGap’s architecture, I’m just a new user in the PhoneGap world!

    Hope you are ok now!

    Good job anyway!

    Like

  4. Thanks, I’m feeling much better now.

    Why don’t you subscribe to my blog, or just follow it on occasion, because I’ll post here when changes have been made to PhoneGap and when I manage to merge my UI features into a drop-in module.

    Like

  5. Great Work!

    Is there any examples that show interaction with the tabbar and toolba, for example adding buttons to the left and right positions of the toolbar with callbacks? I have explored such frameworks such as LiquidGear which is the closet I came to finding a demo. I would like to use PhoneGap, especially since the UIControls are starting to appear. I just need more useful tutorials that cover all of the API’s and interfaces…Any help would be greatly appreciated.

    Like

  6. Man I can’t wait till this is merged into the official phonegap release. There’s no way to have two buttons with the current phonegap alert. I tried to bring in your changes manually from looking at the source code, but I couldn’t get it to work right (it would show it once, but then wouldn’t do the native alert again). I’m sure I just missed something.

    Oh well, here’s hoping it’s merged in soon!

    Like

  7. Hi all, Thanks a lot of, PhoneGap it’s really…grandiose.
    I have a question, is’t possible to create push notification alerts?
    Like “Apple Push Notification service”

    Thanks for help

    Bidou

    Like

  8. I’m trying to merge these notification changes into the 0.8.0 code. What other dependencies are there other than Notification.h, Notification.m, and the notification JavaScript files in the javascript/ and javascript/iphone?

    Like

  9. Hi everybody, it seems I am missing a lot of information how to get this to work. I’ve all kinds of versions but none seems to work for me. I’m just starting my first Phonegap project and I would apreciate any help.
    Thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s