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 Contextual Dialogs

Problem

I want to display a nifty contextual dialog that points to one of my DOM objects.

Solution

Contextual dialogs are really a variation of the pop-up dialog covered in Displaying Pop-Up Dialogs, so take a moment to read that recipe first. The main differences are in your call to the Dialog() constructor and in the call to setContext(), which establishes which DOM object the dialog should point to (see Figure 7-6):

var myDialog = new Dialog(Dialog.DIALOG_CONTEXTUAL);
myDialog.setContext(document.getElementById('attachToMe'));
myDialog.showMessage('Look at Me!', 'Check this out!', button_confirm='Cool!');
Contextual dialog

Figure 7-6. Contextual dialog

Discussion

All of the same tidbits that apply to pop ups apply to contextual dialogs as well, including the ability to set up an <fb:js-string> for use as the body:

<fb:js-string var="messageText">
    Hi <fb:name uid="<?php echo $user?>"
            firstnameonly="true"
            linked="false"
            useyou="false"/>!
</fb:js-string>

<script type="text/javascript">
<!--
var myDialog = new Dialog(Dialog.DIALOG_CONTEXTUAL);
myDialog.setContext(document.getElementById('attachToMe'));
myDialog.showMessage('Message for you!', messageText, button_confirm='Thanks!');
//-->
</script>

That should give you a dialog something like Figure 7-7.

Contextual dialog with an embedded <fb:js-string>

Figure 7-7. Contextual 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