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.
