After improving my Facebook dialog code by over 99%, I decided to take it one step further. The previous improvement allowed the dialog contents to be loaded dynamically with a Mock AJAX call. However, the user was left wondering what was going on if the AJAX request had a slow or even marginal response time. I decided it was necessary to show the dialog box immediately, offering a “Loading..” message until the content arrives.

Creating a loading message message in a Facebook dialog is not as straightforward as it could be. I admit, this is one area where Facebook could stand to improve its JavaScript and Markup Language implementations. After spending a few hours trying to come up with a method to do this, I finally came up with the following setup.

First, I need to pass loading message FBML to the FBJS Dialog constructor. Second, I need to make the AJAX request for the desired dialog contents. Finally, I need to replace the loading FBML with that returned in the AJAX response.

The Loading Message

In order to pass FBML (or even pure HTML) into an FBJS Dialog, it must be pre-rendered. This adds a slight complication to the solution. Fortunately, Facebook offers a means for working around this issue via the <fb:js-string> tag. This tag can be used to render FBML and store it into a JavaScript variable. We can now use this knowledge in creating a loading message.

<fb:js-string var="add_dialog_fbml">
<div id="add_dialog">
<div class="dialog_loading"><img src="<?php echo AppCallbackUrl;?>images/loading.gif"/> Loading...</div>
</div>
</fb:js-string>

The extra DIV element with ID “add_dialog” is important, as we’ll see momentarily.

The FBJS

The next step is to update the FBJS function that creates the Dialog object. Previously, the AJAX call was made prior to any Dialog code executing. For this change, the Dialog needs to be created with the loading message content prior to executing the AJAX request.

<script><!--
function showItemDialog(id, title, ok, cancel) {
// Set the default values.
if (title === undefined) { title = "Add to My Items"; }
if (ok === undefined) { ok = "OK"; }
if (cancel === undefined) { cancel = "Cancel"; }
// Build the Mock AJAX object to request the dialog contents.
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = true;
ajax.ondone = function(data) {
document.getElementById('add_dialog').setInnerFBML(data);
};
// Create a "loading" dialog box that will be updated via the Mock AJAX request.
dialog = new Dialog().showChoice(title, add_dialog_fbml, ok, cancel);
dialog.onconfirm = function() {
// Submit the form if it exists, then hide the dialog.
frm = document.getElementById('frm_additem');
if (frm) { frm.submit(); }
dialog.hide();
};
// Update the dialog contents via Mock AJAX request.
ajax.post("<?php echo AppCallbackUrl;?>ajax/add-dialog.php?asin=" + id);
}
//--></script>

Note the use of the “add_dialog_fbml” variable (as declared through the <fb:js-string> FBML tag) when creating the dialog. Also, remember that “add_dialog” DIV that I mentioned before? Here you can see why it’s important. This bit of FBJS calls the “setInnerFBML” prototype function on this DIV element in order to update the dialog’s contents. Naming this DIV element provides a reference point for updating the content once the AJAX response is returned.