我有一个带有几个“邀请”按钮的 View ,如下所示:
<div class = "fbinvite_form" id = "<%= friend[:identifier] %>" name = "fb">
<div class = "btn btn-small">
Invite
</div>
</div>
当单击这些按钮之一时,将调用 AJAX 函数 (invite_friend):
$('.fbinvite_form').click(function() {
invite_friend();
});
这是invite_friend(一些值在我调试时是硬编码的):
function invite_friend() {
$.post('/groups/7/invitations',
{
"recipient_email": "facebook@meetcody.com",
"commit" : "fb",
"fb" : "fb"
},
function(response) {
});
}
这是从 Controller 返回的相关行:
render :json => {
:url => signup_with_token_url(@invitation.token),
:id => @invitation.id
},
:status => :created
我可以确认此 json 已正确呈现。此时,我期待触发 ajax:success
事件。我的页面顶部有以下代码:
$('.fbinvite_form').bind("ajax:success", function(evt, data, status, xhr) {
...
});
但它没有发射。任何线索可能出了什么问题或如何更好地排除故障(我有点菜鸟)?
其他上下文
我想添加更多内容,因为它可能会有所帮助。我最初构建它是为了与表单一起使用,并且效果很好。出于某些性能原因,我决定切换到使用 AJAX 的按钮。原始表格如下:
<%= form_for([@group, @invitation], :remote => true, :html => { :'data-type' => 'html', :class => 'fbinvite_form', :id => friend[:identifier]}) do |f| %>
<%= f.hidden_field :recipient_email, :value => "facebook@meetcody.com" %>
<div class = "fbinvite btn_list_right" id = "<%= friend[:identifier] %>">
<%= f.submit "Invite", :class => "btn btn-medium btn-primary", :name => "fb" %>
</div>
<% end %>
此后,此代码已替换为您在 Controller 代码段上方看到的所有代码。
更新1
根据 Vince 的建议,我已将“ajax:success”代码移至 success 函数中。这是原始的“ajax:success”函数:
$('.fbinvite_form').bind("ajax:success", function(evt, data, status, xhr){
var fb_id = $(this).attr('id');
var response = eval("(" + xhr.responseText + ")");
var link_url = response.url;
var id = response.id;
var inv_url = <%= raw('"' + group_url(@group) + '/invitations/"') %> + id;
var picture_url = "https://www.example.com.com/assets/cody_130by130.png";
var desc = <%= raw('"' + first_name(current_user) + " is working with Cody on fitness. Join " + genderizer(current_user, "his") + " group to start tracking your workouts. Cody and the other group members will keep you motivated!" + '"') %>;
send_invite(fb_id, link_url, picture_url, desc, inv_url); return false;
});
这是我将代码移至成功函数中所做的操作。问题是我似乎无法访问“xhr”
$.ajax({
type: "POST",
url: "/groups/7/invitations",
data: {recipient_email: "facebook@meetcody.com", commit : "fb", fb : "fb" },
dataType: "json",
success: function(evt, data, status, xhr) {
var fb_id = $(this).attr('id');
var response = eval("(" + xhr.responseText + ")");
var link_url = response.url;
var id = response.id;
var inv_url = <%= raw('"' + group_url(@group) + '/invitations/"') %> + id;
var picture_url = "https://www.meetcody.com/assets/cody_130by130.png";
var desc = <%= raw('"' + first_name(current_user) + " is working with Cody on fitness. Join " + genderizer(current_user, "his") + " group to start tracking your workouts. Cody and the other group members will keep you motivated!" + '"') %>;
send_invite(fb_id, link_url, picture_url, desc, inv_url); return false;
}
});
最佳答案
添加这样的错误处理程序并记录错误,这应该有助于诊断问题。
error: function(xhr, status, error) {
console.log(error);
}
编辑
抱歉,您需要使用 .ajax 而不是 .post。
$.ajax({
type: "POST",
url: "/groups/7/invitations",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
},
error(xhr, status, error) {
console.log(error);
}
});
关于ruby-on-rails - 为什么这个 "ajax:success"事件没有触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11663875/