How to Display a Loading Message in Facebook Dialogs
October 26, 2007
The last installment of Facebook Developer tutorials explains how to reduce bandwidth by replacing FBML fb:dialog tags with AJAX-enabled FBJS Dialog objects. However, while the tutorial demonstrates how to reduce response lengths, the code did not account for one major issue. Because the dialog does not appear on-screen until the AJAX receives a response, and because the AJAX requesting the dialog’s contents could potentially have a slow or marginal response time, the end user is left wondering what is going on between clicking a link and seeing the dialog. In order to resolve this, a “loading” message can be displayed immediately within the FBJS Dialog prior to the AJAX call completing.
The first step in creating a “loading” message is to pre-render the FBML for use in the FBJS Dialog constructor. This can be performed via the fb:js-string tag. Specifically, this tag renders FBML and stores it into a JavaScript variable name defined by the “var” attribute. The following example demonstrates the creation of the loading message FBML.
<fb:js-string var="dialog_fbml"> <div id="dialog_content"> <div class="dialog_loading">Loading...</div> </div> </fb:js-string>
The extra DIV element with ID “dialog_content” is important, as will be explained momentarily.
The next step is to update the FBJS function that creates the Dialog object. In the previous tutorial, the AJAX call was made prior to any Dialog code executing. For this change, the Dialog object must be created with the loading message content prior to executing the AJAX request, as per the following example.
function showDialog(url, title, ok, cancel) {
// Set the default pop-up dialog values for those not supplied.
if (title === undefined) { title = "Dialog"; }
if (ok === undefined) { ok = "Okay"; }
if (cancel === undefined) { cancel = "Cancel"; }
// Build the AJAX object to request the dialog contents.
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = true;
ajax.ondone = function(data) {
// Fill the Dialog's DIV element with the FBML returned by the AJAX request.
// This will overwrite the loading message FBML currently nested in the DIV.
document.getElementById('dialog_content').setInnerFBML(data);
};
// Create a "loading" dialog box that will be updated via the AJAX request.
dialog = new Dialog().showChoice(title, dialog_fbml, ok, cancel);
dialog.onconfirm = function() {
// Submit the Dialog's form if it exists, then hide the dialog.
frm = document.getElementById('dialog_form');
if (frm) { frm.submit(); }
dialog.hide();
};
// Update the dialog contents via Mock AJAX request.
ajax.post(url);
}
Note the use of the “dialog_fbml” variable when creating the dialog. This fills the contents of the pop-up dialog with the loading message as declared through the fb:js-string FBML tag.
Also important it the “dialog_content” DIV element that was pointed out within the “dialog_fbml” variable. Here it can be seen why creating this element is important. The FBJS code makes a call to the “setInnerFBML” prototype function on this element in order to update the dialog’s contents. Providing this DIV element with an ID allows for a reference point in updating the content once the AJAX response is returned.
Comments
8 Responses to “How to Display a Loading Message in Facebook Dialogs”
Got something to say?
I was going thru your article and it’s quite helpful, but i have a query. Is it possible to create the dialog boxes without any button in it?
I tried to use the setInnerFBML for setting the contents of a dialog but it didn’t helped me.
I simply need a dialog but without any button in it.
Please help!
Thanks in advance.
Hi Gurdev,
With the way the Facebook Platform is currently set up, you must include at least one button, which represents the Okay/confirmation button. If you are interested in submitting an enhancement request for the platform, you should check out Bugzilla.
Hi there,
I have been reading the articles on this site and found them to be very informative, however, I am new to AJAX and was wondering if you could tell me how to implement the above code.
I copied both sections into my php page but it doesn`t work, I tried putting the code in a .js file but that renders the code on the screen..
I`ve learnt not to ask for the answer outright, but a push in the right direction would be appreciated as to how I call the function and get it to display the dialog.
Thank you
LOL…I figured it out…needed the tag….thanks for a handy piece of info ;p
After the reading this articles and started to use it, But i get it’s not working properly. When i click on link to call function showDialog it shows me a dialog box and after that process is stop and i get an javascript error - “There was an uncaught Ajax error. Please attach on onerror handler to properly handle failures”. I cann’t understand how i can implement this… It is appreciate if anyone share the solution of this problem.
Dheeraj — You can create an onerror function as per the AJAX object definition. Similar to how ondone is defined above, you can create an onerror function to handle the error however you like. It simply acts as a means to gracefully inform the user that an error has occurred.
Supplying this function, however, won’t resolve whatever error you are currently encountering. While I can only make guesses without seeing your code, some things you should verify are the URL you are calling (try opening it manually in your browser) and the response format of the URL that you are calling (that it returns FBML or JSON accordingly).
Hey Matt,
Oh… I apologize to passing the wrong url. Actually i was using the my FB app url but it is not correct and we should used the APP URL(Your Server) to callback the data through ajax.
Anyway, Thanks for your kind of suggestion.
Glad I could help, Dheeraj. :)