O'Reilly logo

Facebook Cookbook by Jay Goldman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying Pop-Up Dialogs

Problem

I want to display a pop-up dialog in the style seen throughout Facebook (well, I really want to display an alert but I’m not allowed to in FBJS, so I’ll settle for this).

Solution

Facebook Platform provides a very simple implementation of a Dialog object that can easily be used to display pop-up dialogs with a confirm button (Figure 7-3):

var myDialog = new Dialog(Dialog.DIALOG_POP);

// Show the dialog with only a confirm button
myDialog.showMessage('Title Here', 'Text Here', button_confirm='Okay!');
Simple dialog

Figure 7-3. Simple dialog

If you’d like to have the confirm button do something other than just hiding the dialog, you can set an event handler for it before you call showMessage():

myDialog.onconfirm = eventHandlerName;

Your event-handler function can do whatever processing you’d like and should return true to hide the dialog (e.g., you have validated some input in the dialog) or false to leave it open (e.g., the input didn’t validate and the user needs to re-enter it). If you are asking for input, you probably want to add a cancel button (Figure 7-4):

var myDialog = new Dialog(Dialog.DIALOG_POP);
myDialog.onconfirm = handleConfirm;
myDialog.oncancel = handleCancel;
myDialog.showChoice('Title','Body',button_confirm='Okay!', button_cancel='No!');
Dialog with confirm and cancel buttons

Figure 7-4. Dialog ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required