2016-07-29 7 views
0

後にjQueryの中から作成する方法:?レールメソッドを呼び出し、私はデータでフォームを持って成功(機能(JSON)

<div class="container"> 
    <div class="row-fluid"> 
     <%= form_tag class: "form-horizontal" id: "payment-form" %> 
     <%= hidden_field "card_registration_url", card_preregistration['CardRegistrationURL'] %> 
     <%= hidden_field "preregistration_data", card_preregistration['PreregistrationData'] %> 
     <%= hidden_field "access_key", card_preregistration['AccessKey'] %> 
     <%= hidden_field "id_card", card_preregistration['Id'] %> 

     <fieldset> 
      <div id="legend"> 
      <legend class="">Deposit for contract <%= @contract.title %></legend> 
      </div> 

      <div id="legend"> 
      <legend class="">Amount <%= @contract.amount %></legend> 
      </div> 

      <!-- Name --> 
      <div class="control-group"> 
      <%= label "card_holder", "Card Holder's Name", class:"control-label" %> 
      <div class="controls"> 
       <%= text_field_tag "card_holder", { id: "username", class: "input-xlarge"} %> 
      </div> 
      </div> 

      <!-- Card Number --> 
      <div class="control-group"> 
      <%= label "card_number", "Card number", class:"control-label" %> 
      <div class="controls"> 
       <%= text_field_tag "card_number", { id: "card_number", class: "input-xlarge"} %> 
      </div> 
      </div> 

      <!-- Expiry--> 
      <div class="control-group"> 
      <%= label "expity_date", "Card Expiry Date", class:"control-label" %> 
      <div class="controls"> 
       <%= text_field_tag "card_expiration_date", { id: "card_expiration_date", class: "input-xlarge"} %> 
      </div> 
      </div> 

      <!-- CVV --> 
      <div class="control-group"> 
      <%= label "cvv", "Card CVV", class:"control-label" %> 
      <div class="controls"> 
       <input type="password" id="card_cvx" name="password_confirm" placeholder="" class="span2"> 
       <%= text_field_tag "card_expiration_date", { id: "card_expiration_date", class: "input-xlarge"} %> 
      </div> 
      </div> 

      <!-- Save card --> 
      <div class="control-group"> 
      <div class="controls"> 
       <label class="checkbox" for="save_card"> 
       <%= label "save_card", class:"check_box" %> 
       <input type="checkbox" id="save_card" value="option1"> 
       Save card on file? 
       </label> 
      </div> 
      </div> 

      <!-- Submit --> 
      <div class="control-group"> 
      <div class="controls"> 
       <%= button_tag "Pay now", remote: true, class: "btn btn-success" id="process" %> 
      </div> 
      </div> 

     </fieldset> 
     <% end %> 
    </div> 

</div> 

私は私の例では、それはhidden_​​fieldています(サーバーの決済システムにフォームからデータを送信します "サーバーからの応答は、アクションpayments_con呼び出す細かい必要なすべての場合は郵便法によるcard_registration_url」)

register_card.js

$('#process').click(function(){ 
    var valuesToSubmit = $('#payment-form').serialize(); 
    console.log(valueToSubmit); 
    $.ajax({ 
    url: $('#mail-form').attr('action'), //sumbits it to the given url of the form 
    data: valuesToSubmit['card_registration_url'], 
    dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard 
    }).success(function(json){ 
    //act on result. 
    }); 
    return false; // prevents normal behaviour 
}); 

完全な支払いのためのトラッカー/作成。

私はどのようにアクションpayments_controller/createを呼び出しますか?

答えて

1

あなたがpost方法を必要とcreateアクションを呼び出して、あなたのためには、大会命名レールを踏襲している、これはあなたのためにそれを行う必要があり、

/paymentsポスト要求は、支払額のcreateアクションに移動しますコントローラ。

ので、AJAXは

$.ajax({ 
     type: "POST", 
     data: valuesToSubmit['card_registration_url'], // you can send your own data 
     url: "/payments" 
}); 
+0

こんにちは、あなたはまた、データを送信することができ属性をそれからのparamsを通じてデータを送信したい場合は、

$.ajax({ type: "POST", url: "/payments" }); $('#process').click(function(){ var valuesToSubmit = $('#payment-form').serialize(); console.log(valueToSubmit); $.ajax({ url: $('#mail-form').attr('action'), //sumbits it to the given url of the form data: valuesToSubmit['card_registration_url'], dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard }).success(function(json){ $.ajax({ type: "POST", url: "/payments" }); }); return false; // prevents normal behaviour }); 

、として行うことができます呼び出します@ dev85、これを試しましたか? – Sravan

+0

モーメント、プリーツ。やっています.... – dev85

関連する問題