How to Replace MockAJAX with FBJS
October 21, 2007
While MockAJAX provides a simple means for implementing simple in-page requests, it is very limited in what is offered. Conversely, making AJAX requests within FBJS is much more versatile than the basic MockAJAX that is available to Facebook developers. As such, the FBJS options often proves to be more of a satisfactory solution in many places where MockAJAX cannot be used with ease or at all.
For those who are new to making AJAX requests within FBJS, the first step is to create a simple form submission JavaScript function.
function submitForm(url, form_id, target_id) {
// Retrieve element handles, and populate request parameters.
var form = document.getElementById(form_id);
var target = document.getElementById(target_id);
var params = form ? form.serialize() : null;
// Set up an AJAX object. Typically, an FBML response is desired.
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = true;
ajax.ondone = function(data) {
// When the FBML response is returned, populate the data into the target element.
if (target) target.setInnerFBML(data);
}
ajax.post(url, params);
}
For applications that will be making AJAX form submissions on many pages, the above code can be included in a header file for simplicity.
The next step is to create links or buttons to submit any form data using the function defined above. To do this, simply include an onclick event within your anchor element or submit button.
<form id="my_form">
<input type="text" name="data"/>
</form>
<div id="response"></div>
<a href="#" onclick="submitForm('http://something', 'my_form', 'response'); return false;">Click Here</a>
Comments
6 Responses to “How to Replace MockAJAX with FBJS”
Got something to say?
Line 5 of the form: onclick has a typo.
Should be
<a href="#" onclick="submitForm(’http://something’, ‘my_form’, ‘response’); return false;">
instead of
<a href="#" onlick="submitForm(’http://something’, ‘my_form’, ‘response’); return false;">
But great job on the good tutorials!
Thanks for pointing out my typo, Zz85, I’ve corrected it in the tutorial! :)
Thanks exactly what i was looking for :)
I keep getting this error from firebug when using serialize()
for (;;);{”error”:1349011,”errorSummary”:”Failed to fetch app Ajax”,”errorDescription”:”",”payload”:null
,”bootload”:[{”name”:”js\/common.js.pkg.php”,”type”:”js”,”src”:”http:\/\/static.ak.fbcdn.net\/rsrc.php
\/pkg\/76\/114228\/js\/common.js.pkg.php”}]}
But in the Post header I can see that they are being sent. Ever seen that?
I am seeing the “Failed to fetch app Ajax” error too.
for (;;);{”error”:1349011,”errorSummary”:”Failed to fetch app Ajax”,”errorDescription”:”",”errorIsWarning”
:false,”payload”:null,”bootload”:[{”name”:”js\/common.js.pkg.php”,”type”:”js”,”src”:”http:\/\/static
.ak.fbcdn.net\/rsrc.php\/v1\/pkg\/90\/119988\/js\/common.js.pkg.php”}]}
Turned out that my server was returning an error 500.