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.
Loading...
The extra DIV element with ID “add_dialog” is important, as we’ll see momentarily.
Note the use of the “add_dialog_fbml” variable (as declared through the 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.
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
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.Note the use of the “add_dialog_fbml” variable (as declared through the
0 komentar:
Posting Komentar