From Facebook Developer Wiki
[edit] Dynamic Dialog Retrieving Form Field Values During Form Submission Using FBJS & Ajax
By: Foez M Rahim
The example below shows how to use a DIALOG_POP to retrieve values from a simple form (not a request form) in a page which contains a fb:multi-friend-inputand a select menu as inputs.
The form posts these input to the same page when submitted... Now in between a dialog box will pop up when the users fills up the form and clicks the submit button. The dialog box will be used for confirmation about the correctness of the data input. It will show all the friends name a user selects inside the fb:multi-friend-input and the other selected value from the Select menu.. and would ask the user if the information is correct or not. If the user selects Yes the actual form will then be submitted to the same page, else if the user selects no it will return back to the page without submitting anything.
This is the first file (say example.php) containing the form :
<?php
if (isset($_POST["ids"])) {
$friends = (isset($_REQUEST["ids"])) ? $_REQUEST["ids"] : 0;
echo 'Your Selected Friends Are:<br/><br/>';
foreach ($friends as $fnames) {
echo '<b><fb:name uid="'.$fnames.'" capitalize="true" linked="false"/></b>, ';
}
echo '<br/><br/>The selected value is: '.$_POST["yourSelect"].' <br/><br/>Success!!! ';
}
?>
<br/><br/>
<script language="JavaScript" type="text/javascript">
function submitForm(varForm){
// Build the AJAX object to request the dialog contents.
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = true;
ajax.ondone = function(data) {
document.getElementById('dialog_content').setInnerFBML(data);
};
dlg = new Dialog();
dlg.showChoice('Confirm Request', dialogText , 'Yes', 'No');
dlg.onconfirm = function() {
varForm.submit();
}
ajax.post('http://www.YourServer.com/ajax.php', varForm.serialize());
// the above url must be the full url of your server containing the ajax.php (the second file), NOT something like http://apps.facebook...
}
</script>
<fb:js-string var="dialogText">
<div id="dialog_content">
<div class="dialog_loading">Loading...</div>
</div>
</fb:js-string>
<!-- this is your form -->
<form id="yourForm" method="post">
Start by typing your friends name:<br/>
<fb:multi-friend-input width="200px" border_color="#8496ba"/>
<br/>Select an option:
<select name="yourSelect">
<option value="option A">option A</option>
<option value="option B">option B</option>
<option value="option C">option C</option>
</select>
<br/><br/>
<input type="button" value="Submit" class="inputsubmit" onclick="submitForm(document.getElementById('yourForm'))"/>
</form>
<br/><br/>
Now, create the second file called ajax.php :
<?php
// the facebook client library
include_once 'php4client/facebook.php';
// this could be 'client/facebook.php' if your server supports php5
if (isset($_POST["ids"])) {
$friends = (isset($_REQUEST["ids"])) ? $_REQUEST["ids"] : 0;
//if (isset($_POST["yourSelect"])) {
echo 'Your Selected Friends Are:<br/><br/>';
foreach ($friends as $fnames) {
echo '<b><fb:name uid="'.$fnames.'" capitalize="true" linked="false"/></b>, ';
}
echo '<br/><br/>The selected value is: <b>'.$_POST["yourSelect"].'</b><br/><br/>Is this Information Correct?';
}
else {
echo 'You must input one or more of your friends !!!';
}
?>
Run the example.php now (you must be logged in to your facebook account). When you will fill the form and submit it a dialog box would pop up showing all the selected friend's name and the selected option.
Below is another modified version of the above ajax.php which will not just show the friend's name but also their profile pictures along with their names.
<style type="text/css">
.clearLeft {clear:left; height:0em; width:0em;}
.listEditPaging { width:100%; text-align:left; font-size:110%; margin-top:.3em; margin-bottom:.8em; }
.icon {padding-left:.5em ; padding-right:.5em; width:5em; height:5em; text-align:center; }
.name {padding-left:.5em ; padding-right:.5em; width:5em; height:1.5em; padding-top:.1em; text-align:center; }
.personDiv {width:5em; padding:.6em; float:left; }
</style>
<?php
// the facebook client library
include_once 'php4client/facebook.php';
// this could be 'client/facebook.php' if you are using php5 client
if (isset($_POST["ids"])) {
$friends = (isset($_REQUEST["ids"])) ? $_REQUEST["ids"] : 0;
// Shows all the friends from fb:multi-friend-input
$numColumns = 6;
$column = 0;
$row = 0;
echo '<div class="listEditPaging">';
{
echo 'Your Selected Friends Are:';
}
echo '</div>';
foreach ($friends as $f_id) {
echo '<div class="personDiv">';
{
echo '<div class="icon" id="editIcon' . $f_id . '">';
{
echo '<fb:profile-pic uid="' . $f_id . '" size="square" linked="false"/>';
}
echo '</div>';
echo '<div class="name" id="editName' . $f_id . '">';
{
echo '<fb:name uid="' . $f_id . '" capitalize="true" firstnameonly="true" linked="false"/>';
}
echo '</div>';
}
echo "</div>"; // personDiv
$column++;
if ($column == $numColumns) {
$column = 0;
echo '<div class="clearLeft"><!-- --></div>';
$row++;
}
}
echo '<div class="clearLeft"><!-- --></div>';
// shows the value from select
echo '<br/><br/>The selected value is: <b>'.$_POST["yourSelect"].'</b><br/><br/>Is this Information Correct?';
}
else {
echo 'You must input one or more of your friends !!!';
}
?>
Similar techniques can be applied for other form elements too.
Thanks,
Foez
558952567 18:46, 23 January 2008 (PST)
