请参阅下面我对此问题的回答。它基于Kevin的输入,关于堆栈溢出的另一个问题加上一些反复试验。
我正在尝试做一些我认为相当简单的事情,但我一直都在失败。我的页面上有一个表单,用户可以选中一个框,使用javascript SDK将其输入发布到他们的Facebook墙上。用户确认或取消发布到他们的Facebook墙后,我无法正常发布表单。具体来说,如果我只是在函数结尾处“返回true”或者如果我将return false添加到结尾,它或者不等待答案,但是将facebook返回true插入到我的回调函数中以进行facebook api调用,它等待我回答并按预期提交到Facebook墙,但后来什么也没做。
这是我的代码到目前为止(这是第二个例子,发布到Facebook很好但后来没有正常提交表单):
<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>
这是我的表格,如果有任何帮助的话:
<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>
提前感谢您的帮助!
答案 0 :(得分:3)
我想我知道你的问题是什么。当您在表单上运行提交功能时,它希望立即提交,但是,如果您在其上返回false,则表单将不会提交。你想要的是编写一个不同的函数来处理你的fb post ....然后在那个逻辑的结尾,你想做一个$('#search').submit();
所以举例......
$('#submitButton').click(function(e){
e.preventDefault();
[All your logic here in your original function]
publishWallPost('{{ page.slug }}', notes, begin + " from " +start+" to " + dest + " on "+date+" at " + time + end);
$('#search').submit();
});
您需要重写表单提交按钮,因为您不希望它首先使用表单的提交功能,您希望它首先运行您的新功能。
<input type="button" id="submitButton" value="Submit" name="submitme" class="form-submit" />
所以你在这里做的是....你想在表格上运行你的逻辑,然后你想做你的Facebook发帖,或者不....然后你运行实际提交的一旦你打电话给你的FB帖子就形成你的php帖子。
我希望这是有道理的。
答案 1 :(得分:0)
如果将来有人试图这样做,这就是最终代码的样子。谢谢你kevin.mansel指出我正确的方向。我需要将submit()添加到回调函数,并将表单的提交按钮添加到表单标签外,否则它会破坏javascript。这是javascript:
$(function() {
$('#submitButton').click(function(e) {
e.preventDefault();
var type = $('#type').val();
if((type == 'o' || type == 'r') && $('#fb-publish').attr('checked') == true) {
[logic from original post]
publishWallPost('{{ page.slug }}', notes, description);
}
else $('#search').submit();
});
});
</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.');
$('#search').submit();
} else {
alert('Ride was not published to your Facebook wall.');
$('#search').submit();
}
});
}
//-->
</script>
以下是HTML表单:
<form action="quick_process.php" method="post" name="search" id="search" >
[form inputs]
</form>
<input type="submit" value="Submit" name="submit" class="form-submit" id="submitButton" />
请注意,提交按钮位于表单标记之外(或者它可以是链接或图像,也可以是绑定了点击事件的任何内容。)