Facebook Cookbook

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