0

ユーザーの編集ページでクレジット カードの追加/編集フォームを作成しようとしています。そのために、顧客コントローラーで編集および作成機能への ajax 呼び出しを実装しようとしています。

これは、モーダル ウィンドウ内の更新ボタンのコードです。

<%= button_tag "Update", :class =>"btn submit-button", :type => 'button', :onclick => "onUpdateCard('#{current_user.id}');"%>

呼び出す関数は次のとおりです。

function onUpdateCard(id) {
this.id = id;

// disable the submit button to prevent repeated clicks
$('.submit-button').attr("disabled", "disabled");
var card_number = document.getElementById('card_number').value;
var card_code = document.getElementById('card_code').value;
var card_month = document.getElementById('card_month').value;
var card_year = document.getElementById('card_year').value;

var response = Stripe.createToken({
    number: $('#card_number').val(),
    cvc: $('#card_code').val(),
    exp_month: $('#card_month').val(),
    exp_year: $('#card_year').val()
}, stripeResponseHandler);        
// allow the form to submit with the default action
return false;
};

function stripeResponseHandler(status, response) {
if (response.error) {
    $(".payment-errors").text(response.error.message);
    $(".submit-button").removeAttr("disabled");
} else {
    var token = response['id'];
    var new_url = "/users/" + this.id + "/customers/new";
    var edit_url = "/users/" + this.id + "/customers/1/edit";
    $.ajax({
        type:'GET',
        url:  edit_url,
        data: {'stripe_card_token': token}
    });
}
return false;
};

そしてコントローラーには編集機能があります：

def edit
    @user = current_user
    @customer = @user.customer    
    stripe_customer = Stripe::Customer.retrieve(@customer.stripe_customer_token)
    stripe_customer.card = params[:stripe_card_token]
    stripe_customer.save
end

ajaxを正しく処理する方法を理解するのを手伝ってもらえますか? これを適切にデバッグする方法がわかりません...

4

1 に答える 1

3

ここでは、AJAX を使用して更新要求を処理する代替案を提案しています。

私はあなたのコードを改善したり修正したりしているわけではありませんが、Rails 3 で AJAX リクエストを処理する方法を提供しています。

を。見る

AJAX 呼び出しを使用してデータベースで更新する情報は、フォームを介して渡します。したがって、AJAX リクエストを作成するには、フォームに :remote => true を追加する必要があります。Rails はこのヘルパーを提供します。

<%= form_for @customer, :url => admin_customers_path, :method => :post, :remote => true, :html => { :id => "customer-form" } do |form|-%>
      <%= render :partial => 'admin/customers/form', :object => form %>
      <%= form.submit 'Update' %>
<% end %>

_form.html.erb では、テキストフィールドなど、編集フォームに追加したいものを追加できます

b. コントローラ

" :remote => true " のため、フォーム送信は JS リクエストを行うため、顧客コントロールのデータを保存した後の更新アクションでは、format.js に移動し、ビューで update.js.erb を探します。

def update
  if @customer.update_attributes(params[:customer])
    respond_to do |format|
      format.html {
                  flash[:success] = "customer's info was updated Successfully."
                  redirect_to customers_path
      }
      format.js
    end
  else
    respond_to do |format|
      format.html {
                  flash[:error] = @customer.errors.present? ? @customer.errors.full_messages.join('<br />') : "Oops! There is some problem with category update."
                  render :edit
      }
      format.js
    end
  end
end

c. update.js.erb

更新が成功した後、何かを行うことができます。いくつかの div を強調表示したい場合、次のようにすることができます。

  $('.target-div').effect("highlight", {}, 2500);
于 2012-12-23T10:09:53.637 に答える