2

次のような「招待」ボタンがいくつかあるビューがあります。

<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) {
        });
}

コントローラーから返される関連行は次のとおりです。

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 %>

これは、コントローラ スニペットの上にあるすべてのコードに置き換えられました。

更新 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;
        }
        });
4

1 に答える 1

1

このようなエラーハンドラを追加してエラーをログに記録します。これは問題の診断に役立ちます。

        error: function(xhr, status, error) {
              console.log(error);

        }

編集

申し訳ありませんが、.postの代わりに.ajaxを使用する必要があります。

$.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);
  }
});
于 2012-07-26T08:29:02.740 に答える