Browse > Home / Tutorials / How to Replace MockAJAX with FBJS

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.

Advertisement

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>
Related Articles

Share on Facebook      Share This

Written by Matt Huggins · Filed Under Tutorials 

Comments

8 Responses to “How to Replace MockAJAX with FBJS”

  1. Zz85 on January 10th, 2008 2:12 am

    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!

  2. Matt Huggins on January 10th, 2008 4:03 am

    Thanks for pointing out my typo, Zz85, I’ve corrected it in the tutorial! :)

  3. Moustafa on May 9th, 2008 12:15 pm

    Thanks exactly what i was looking for :)

  4. Brett on August 6th, 2008 5:21 pm

    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?

  5. Sean on September 5th, 2008 1:05 pm

    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”}]}

  6. Sean on September 5th, 2008 2:52 pm

    Turned out that my server was returning an error 500.

  7. Gaurav Kumar on June 22nd, 2009 5:59 am

    I get the same error …

    for (;;);{”error”:1349011,”errorSummary”:”Failed to fetch app Ajax”,”errorDescription”:””,”payload”:null

    Although server returns 200

    Please Help

  8. Rowland on July 4th, 2009 7:52 pm

    I had the same error :

    for (;;);{”error”:1349011,”errorSummary”:”Failed to fetch app Ajax”,”errorDescription”:””,”payload”:null

    I was trying to access http://www.google.com.
    I changed it to be the same site as where my facebook application was stored and it started to work. So I think FB wasn’t allowing me to go anywhere else except my application’s server.

    Hope this helps.

Got something to say?





Close
E-mail It