In a facebook iframe page (not tab), I’d like to post data to an external API using cURL, but I would prefer if my form page didn’t reload.
I’d like to have some jquery ajax happening (“submitting data” message on submission of the form and a success message on success of the curl_exec). I was thinking of creating a hidden iframe with a duplicate form and update values in that form on change events, but i don’t know quite how I’d implement that exchange between PHP and jquery.
Is there a better way? Here’s the code I’m working on:
UPDATED CODE TO RETURN FALSE —
Does not submit form data.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body class="fb_canvas-resizable <?php print $body_classes; ?>">
<?php echo $message; ?>
<div class="container">
<div class="header"></div>
<div class="wrapper">
<div class="content">
<div class="left">
<h1>Sign Up to Sign Off</h1>
<form name="signoff" action="curlsub.php" method="post">
<input id="api" type="hidden" name="API_KEY" value="key">
<div class="innerleft">
<input id="fname" type="text" name="fname" class="inputs" tabindex="1" /></br />
<label for="fname">First</label></br /></br /></br />
<input type="text" name="email" class="inputs" tabindex="3" /></br />
<label id="email" for="email">Email</label></br /></br /></br />
<label for="gender">Gender</label></br /></br />
<label for="gender">Age</label></br /></br /></br />
<label for="gender">Income</label></br /></br /></br />
</div>
<div class="innerright">
<input id="lname" type="text" name="lname" class="inputs" tabindex="2" /></br />
<label for="lname">Last</label></br /></br /></br />
<input id="password" type="password" name="password" class="inputs" tabindex="4" /></br />
<label for="email">Password</label></br /></br /></br />
<input type="radio" name="sex" value="male" selected="selected" tabindex="5" /> Male
<input type="radio" name="sex" value="female" tabindex="6" /> Female</br /></br />
<select name="age" tabindex="7" >
<option value=""></option>
<option value="baby">Baby</option>
<option value="teen">Teen</option>
<option value="young">Young</option>
<option value="old">Old</option>
</select><br /><br />
<select name="income" tabindex="8">
<option value=""></option>
<option value="none">None</option>
<option value="some">Some</option>
<option value="okay">Okay</option>
<option value="tons">Tons</option>
</select><br /><br />
<input id="zip" type="text" name="c5" class="zip" tabindex="9" /></br />
<label for="c5">Zip Code</label></br /></br />
<label for="mformat">Newsletter</label></br /></br />
<input type="checkbox" name="mformat" value="html" selected="selected" tabindex="10" /> HTML (iPhone, iPad, Droid)<br /><br />
<input type="checkbox" name="mformat" value="text" tabindex="11" /> TEXT (Best for Blackberry)
</div>
<div class="button"><input type="image" src="button.jpg" name="submit" value="yes"></div>
</form>
</div>
<div class="right">
<img src="logo.jpg" />
<p>Updating you on today and prepping you for tomorrow.</p>
<a href="http://www.url.com">www.url.com</a>
</div>
<div class="clear">
</div>
<div class="logged clear">
<p>Logged in as Some Guy (<a href="#">not you?</a>)</p>
</div>
</div></div>
<div class="footer"></div>
</div>
<script>
$(document).ready(function() {
//$('div.wrapper').fadeOut(0);
window.fbAsyncInit = function() {
FB.init({appId: 'app', status: true, cookie: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
});
$('#signoff').submit( function() {
var fname = $("input#fname").val();
var lname = $("input#fname").val();
var email = $("input#email").val();
var password = $("input#password").val();
var dataString = 'fname='+ fname + '&lame=' + lname + '&email=' + email + '&password=' + password;
// alert(dataString);
// return false;
$.ajax({
type: "POST",
url: "curlsub.php",
data: dataString,
success: function() {
//do some stuff
}
});
return false;
});
</script>
</body>
</html>
Currently this will successfully send the data to the external PHP API, but the iframe (or my whole file) reloads on submission (and displays “success” message).
What you want to do is issue an AJAX Post request on the submit event of your form. The success callback of that AJAX Post request should update your UI to alert the user that their post was sucessful.