Facebook AJAX, FBJS, Dialogue Self-Post ...

I was frustrated with the fbjs and mock ajax popups because i couldn get a popup form to post repeatedly to itself. If you follow the documentation by the letter to add these popups, you will end up creating new dialogues and the user will have to close them all manually.

My forward dialogue script below will use AJAX to open a dialogue, then post the contents back to itself as many times as you like when you click Ok. The cancel button will close the dialogue when the user is done.

- In this case prams sho blank for the first post. You may change it if you want to post page info, but i just use a URL with a query string.
- url is the url of the page that you want to do the ajax post to.
- forwardForm is replaced by the id of the form on the page on your application that you are posting too.
- I am using 2 seperate methods so the first one doesn post anything and chew bandwidth.
- Also note the new Dialogue() is declared outside the function so it doesn create a new one every time. Saw lots of complaints about this on the wiki.

var dlg = new Dialog();
function do_forward(url)
{
    var ok = Forward;
    var cancel = Cancel;
    var ajax = new Ajax();

    ajax.responseType = Ajax.FBML;
    ajax.requireLogin = true;
    ajax.ondone = function(data)
    {
        dlg.showChoice(Forward listing, data, ok, cancel);
        dlg.onconfirm = function() {
            var fwdForm = document.getElementById(forwardForm);
            var newPrams = fwdForm.serialize();
            do_nextForward(url, newPrams);
            return false;
        }
    }
    ajax.post(url);
}

function do_nextForward(url, prams)
{
    var ok = Forward;
    var cancel = Cancel;
    var ajax = new Ajax();

    ajax.responseType = Ajax.FBML;
    ajax.requireLogin = true;
    ajax.ondone = function(data)
    {
        dlg.showChoice(Forward listing, data, ok, cancel);
        dlg.onconfirm = function() {
            var fwdForm = document.getElementById(forwardForm);
            var newPrams = fwdForm.serialize();
            do_nextForward(url, newPrams);
            return false;
        }
    }
    ajax.post(url, prams);
}

Notice that the dialogue is declared outside of the post function and is re-used. The Facebook Wiki examples all declare a new popup and will limit you to simple "Ok"/"Cancel" dialogues, but the above will enable functionality inside them.

The other not if you are using ASP.NET is that you will have to use Request[varName] to retrieve form post values. Facebook isn very .net friendly on canvas pages and even less friendly on the dialogues (not a whinge - I understand security concerns).

source: gatsdev.blogspot

 View Full Story.

1 Comment |Add your comment.

Aslam Shahid said:

Its very nice for developers but it vl b more helpful it u plz provide screenshots of flow so new developers may learn soon..ThnX

Posted at September 27, 2008 05:40:46 am

Your Comment ...

  Name (required)

  Email (required, hidden)

  Website