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

JavaScript:

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
queryParams={"round":TipRound,"game":GameNum,"team":TipTeam,"fbid":############}

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

}
return false;
}

HTML

TEAM NAME

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');
exit;
} else {
$sql3 = "INSERT INTO tablename (game, mypick, theusersid, round) VALUES (".$GameNum.", ".$TipTeam.", $fbuid, ".$TipRound.")";
$result3 = mysql_query( $sql3 ) or die ('error sql3');
exit;
}

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

NOTE:

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