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