Facebook AJAX howto
It’s finally time to announce it - we have several facebook apps in beta. Hurray!
The most fully-featured, by far, is one called “Real Gifts“. It’s intended to be the simplest, most digestible example of collaborative commerce possible - a bunch of friends working together to buy each other really cool birthday gifts.
Today I finished some integration with the Amazon API, so that users can pick the gifts they want out of the Amazon store. I used Facebook’s “Mock AJAX” features, and I learned a few things very quickly.
- Put your dummy forms at the top of the page. Why? I had attempted to put my dummy form inside the content that gets refreshed via AJAX call - which doesn’t work the second time.
- Tricks for the “Loading…” message - while the instructions on the wiki are pretty good, there is a delicate art to the placement of the loading div itself. It needs to be within the content that’s being refreshed. For some reason, I’m still getting orphaned “Loading…” divs occasionally - not sure why. (I’ve put a clicktotoggle on the same link as the clicktorewrite attributes.)
- It seems obvious, but make sure you’re not using apps.facebook.com-based URLs for your AJAX calls. The frame, etc. that gets packed onto the content will DEFINITELY get in your way.
- Nesting of AJAX-returned content works fine - as long as all the fake forms you’ll ever need are outside of that content.
Oh, and a final tip - if you write a form that submits file content (multipart), don’t try and post it to an apps.facebook.com-based URL. It won’t work. Simply post it to your own server directly, and make sure you handle the form content before calling require_frame() or require_login().