Ajax – FBJS – Dynamic Form Submission Inside a Facebook App

Well, it was a slight headache (Large actually) but I’ve now got my Facebook app running on an Ajax based tip’s submission system.

I like it; I am worried however that users might not understand that the tips are actually being submitted as they click.

I will need to find a way to indicate this a little better than I have it right now

Bellow’s code has had a lot of stuff taken out for posting. It was in amongst code that was related to this function. If you find any issues please contact me and I will try and fix it up and/or help you out


function PostTips(TipOn, TipOff, BGColour, GameNum, TipTeam, TipRound) {

**   TipOn, TipOff, BGColour = used for CSS purposes   **
** GameNum, TipTeam, TipRound used for data submission **

// set text for confirmation dialogue
var dialog = new Dialog().showChoice('Tip team', 'Are you sure you want to tip this team?');

// puts up a confirmation  box
dialog.onconfirm = function() {

var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
// Once the user hits OK run the Ajax process
ajax.ondone = function(data) {

// Cosmetic CSS styling to indicate process usage
obj = document.getElementById(TipOn);
obj.setClassName(BGColour + '_open_picked');

obj2 = document.getElementById(TipOff);
obj2.setClassName(BGColour + '_open');

// if the requested page returns nothing then spit out an error
ajax.onerror = function() {
dialog = new Dialog().showMessage('Oops', 'Something screwed up.');
// setup the 'form' submission elements that are to be received by /bin/process.php

ajax.post("http://fb.tipping-comp.com.au/bin/process.php", queryParams);

return false;



There is a lot of content taken out of this; all the attributes are used for different things on the page. I have simplified it with just using variables such as a, b, c etc

PHP in /bin/process.php

$TipRound = $_POST['tipround'];
$fbuid = $_POST['fbuid'];
$GameNum = $_POST['game'];
$TipTeam = $_POST['tipteam'];

if ($_POST['fb_sig'] == '' || $TipRound == '' || $fbuid == '' || $GameNum == '' || $TipTeam == '') { exit; }

$sql = "SELECT * FROM tablename WHERE theusersid='".$fbuid."' AND game = ".$GameNum;

$result = mysql_query($sql);

if (isset($result)) {
$search = mysql_num_rows( $result );

if ( 0 < $search ) {
$sql2 = "UPDATE tablename SET mypick = ".$TipTeam." WHERE theusersid = ".$fbuid." AND game = ".$GameNum;
$result2 = mysql_query( $sql2 ) or die ('error sql2');
} else {
$sql3 = "INSERT INTO tablename (game, mypick, theusersid, round) VALUES (".$GameNum.", ".$TipTeam.", $fbuid, ".$TipRound.")";
$result3 = mysql_query( $sql3 ) or die ('error sql3');

All this does is check to see if there are already tips in the database, IF there is then APPEND the database. If there isn’t, INSERT into the database


One major factor that I found while using Ajax in FBML is if your /bin/process.php page or variant of; returns absolutely not content, then the FBJS confirm dialogue box does NOT return a successful process and spits out the error despite it sending 200 page headers.

My page returns a simple piece of text after a few testing procedures to make sure everything has worked properly.

Leave a Reply