Please see my answer to this question below. It is based upon Kevin’s input, another question on stack overflow plus some trial and error.
I am trying to do something I think is fairly simple, yet I keep failing. I have a form on my page, the user has the option to check a box that will post their input to their facebook wall using the javascript SDK. I am having trouble getting the form to post normally after the user have confirmed or canceled posting to their facebook wall. Specifically, it either doesn’t wait for an answer if I simply have “return true” at the end of the function or if I add return false to the end, but insert return true into my callback function for the facebook api call, it waits for me to answer and submits to the facebook wall as expected but then does nothing.
Here is my code so far (this is the second example, posts to facebook fine but then does not submit form normally):
<script type="text/javascript">
$(function() {
$('#search').submit(function() {
var type = $('#type').val();
if((type == 'o' || type == 'r') && $('#fb-publish').attr('checked') == true) {
var start = $('#start :selected').text();
var dest = $('#dest :selected').text();
var date = $('#datepicker').val();
var time = $('#time').val();
var seats = $('#spots').val();
var notes = $('#notes').val();
console.log('type: ',type);
if(type == "r") {
var begin = "I need a ride";
if(seats > 1) {
var end = " for "+seats+" people.";
}
else {
var end = '.';
}
}
else {
var begin = "I'm offering a ride";
if(seats > 1) {
var end = " for "+seats+" people.";
}
else {
var end = ' for 1 person.';
}
}
publishWallPost('{{ page.slug }}', notes, begin + " from " +start+" to " + dest + " on "+date+" at " + time + end);
return false;
}
else {
alert('you are browsing!');
return true;
}
});
});
</script>
<script>
<!--
function publishWallPost(slug, message, description) {
var attachment = {'name':'Backcountryride.com','description':description,'media':[{'type':'image','src':'http://dev.backcountryride.com/images/vanlogo.jpg','href':'http://backcountryride.com/' + slug + '/'}]};
FB.ui({
method: 'stream.publish',
message: message,
attachment: attachment,
user_message_prompt: 'post this ride to your wall?'
},
function(response) {
if (response && response.post_id) {
alert('Ride was published to your Facebook wall.');
return true;
} else {
alert('Ride was not published to your Facebook wall.');
return true;
}
});
}
//-->
</script>
And here is my form, if that is of any help:
<form action="quick_process.php" method="post" name="search" id="search" >
<label for="type" id="quick_label1" >Choose Action</label>
<select name="type" size="1" id="type">
<option value="">Please Select</option>
<option value="o" <?php if(isset($type) && $type == 'o') echo ' selected="selected" '; ?> id="option1">Offer a Ride</option>
<option value="r" <?php if(isset($type) && $type == 'r') echo ' selected="selected" '; ?> id="option2">Request a Ride</option>
<option value="b" <?php if(isset($type) && $type == 'b') echo ' selected="selected" '; ?> id="option3">Browse All</option>
</select><br />
<div>
<label for="date" >Date</label>
<input type="text" name="date" id="datepicker" value="<?php if(isset($date)) echo $date; ?>" /><br />
<label for="time">Time</label>
<input type="text" id="time" name="time" value="<?php if(isset($time)) echo $time; ?>" /><br/>
<label for="start_id">From</label>
<select name="start_id" size="1" id="start">
<?php
echo selectNode($start_id);
?>
</select><br />
<label for="dest_id">To</label>
<select name="dest_id" size="1" id="dest">
<?php
echo selectNode($dest_id);
?>
</select><br />
<label for="spots" id="quick_label2">Seats or People</label>
<select id="spots" name="spots">
<option value="" >0</option>
<?php
for($i=1;$i<=9;$i++) {
echo '<option value="'.$i.'"';
if(isset($spots) && $i == $spots) echo ' selected="selected" ';
echo '">'.$i.'</option>';
}
?>
</select><br />
<div id="offer-notes">
<label>Notes / Comments</label>
<textarea name="offer_notes" id="notes" ><?php if(isset($offer_notes)) echo $offer_notes; ?></textarea>
</div>
<label>Send To</label>
<select name="distribution" size="1" >
<option value="" >Please Select</option>
<option value="1">Everyone</option>
<option value="2">Friends Only</option>
<option value="3">Friends of Friends</option>
</select>
<label>Post to your Facebook Wall</label>
<input type="checkbox" name="fB_publish" value="Y" id="fb-publish"/>
<input type="hidden" value="add" name="action" />
<input type="hidden" value="<?php echo $_SESSION['user_id']; ?>" name="user_id" />
<input type="hidden" value="process" name="process_quick" />
<input type="submit" value="Submit" name="submit" class="form-submit" />
</div>
</form>
Thanks in advance for any help!
I think I know what your problem is. When you run the submit function on a form, it wants to submit right away, however, if you return false on it, the form won’t submit. What you want is to write a different function that will handle your fb post….then at the end of that logic, you’d want to do a
$('#search').submit();So for example….
You will want to rewrite your form submit button as so…since you don’t want it to first the submit function of the form, you want it to run your new function first.
So what you’re doing here is….you want to run your logic on the form, then you want to do your facebook posting, or not….then you’d run the actual submit of the form to your php post once you’ve called your FB post.
I hope that makes sense.