'showing' a facebook fb:dialog

Question

i want to use facebook's fb:dialog tag to display a simple pop-up form for the user to fill in. but i want to show that dialog using javascript (in the ondone handler of an ajax request).

is this possible? i took a stab in the dark and tried document.getElementById('dialog_id').show() but show() is not a method.

alternatively there is the FBJS Dialog class but as far as i can tell you can only use it to create simple alert/confirm style dialogs. if someone knows of a way to put arbitrary content in them then that may also solve my problem.

Answer 1

You can put arbritrary content inside of an FBJS dialog box.

First, store some arbitrary fbml in an fb:js-string tag:

<fb:js-string var="whatever">
<!-- HTML/fbml here -->
</fb:js-string>

then in fbjs do:

(new Dialog()).showMessage('title',whatever); 

Answer 2

figured it out.

buried in http://wiki.developers.facebook.com/index.php/FBJS/Examples/Dialogs is the answer.

basically you create a <fb:js-string> element with your form contents and then specify that string as the contents of the Dialog with the showChoice() method.

here is the relevant example:

<a href="#" id="dialog_body" onclick="var dialog = new Dialog().showChoice('Important Dialog', dialog_color, 'Okay', 'Nevermind');
dialog.onconfirm = function() {
  var color = document.getElementById('dialog_color_select').getValue();
  document.getElementById('dialog_body').setStyle({background: color});
};
return false;">
A dialog that changes your colors...</a><br />

<fb:js-string var="dialog_color">
<b>What color would you like this set to be?</b><br />
<select id="dialog_color_select">
<option value="transparent">Default</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
</fb:js-string>

Answer 3

I am trying to do something similar, but within the dialogue I want to show show what was essentially another dialog...

So I setup

Become a fan!
Click the Like button below to become a fan of XXXXXX!

 

And then when I call

function onBecomeAFanPressed() { (new Dialog()).showMessage('Become A Fan',fandialog); }

I see the dialogue, but no contents.....

What am I missing?

Thanks