Facebook Cookbook

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!');

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!');

Figure 7-4. Dialog ...