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

Dialogs with Ajax

Problem

I have an fb:dialog with a form in it, which I’d like to submit to my server and have the result displayed back in my fb:dialog.

Solution

Facebook’s Mock Ajax is perfect for this kind of application, taking a lot of the pain out of doing things such as dynamic form submission without having to reload the page. The setup is pretty simple, requiring an fb:dialog, a trigger control, and a response page. Let’s start with the fb:dialog, which can be defined anywhere in your FBML (or in an included file if you’re going to use it in a few places throughout your app):

<fb:dialog id="ice_cream" cancel_button="true">
    <fb:dialog-title>I Scream! You Scream! We All Scream!</fb:dialog-title>
    <fb:dialog-content>
        <form id="ice_cream_flavors">
            <p>What's your favorite flavor?</p>
            <select name="flavors">
                <option>(Please choose a flavor!)</option>
                <option value="chocolate">Chocolate</option>
                <option value="vanilla">Vanilla</option>
                <option value="rockyroad">Rocky Road</option>
                <option value="moosetracks">Moose Tracks</option>
            </select>
        </form>
        <div id="ice_cream_image"></div>
    </fb:dialog-content>
    <fb:dialog-button
        type="submit"
        value="For Ice Cream!"
        clickrewriteurl="http://www.someserver.com/ice_cream_maker.php"
        clickrewriteid="ice_cream_image"
        clickrewriteform="ice_cream_flavors"/>
</fb:dialog>

Note

Some of you out there in reader land are inevitably going to read this example and say, “Moose Tracks!? He’s just making this stuff up.” I pity you. Go out to your nearest vendor of ...

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