Question

我第一次尝试了一些ajax但是没有成功，我想使用ajax渲染部分单选按钮选择，这是我的代码：

我的script.js：

$(document).ready(function(){
$.ajax({
  url : "/income_vouchers/income_voucher_partial?$('form input[type=radio]:checked').val()="+$('form input[type=radio]:checked').val(),
  type: "GET",
  data: { 
        type: $('form input[type=radio]:checked').val() 
      }
});

 });

income_voucher.js.erb

$("#payment_mode").append('  

     <% if params[:type]== 'cheque' %> 
         <%= escape_javascript render :partial => "cheque" %>
     <% elsif params[:type]=='card' %> 
          <%= escape_javascript render :partial => "card" %>
     <% elsif params[:type]=='ibank'%> 
         <%= escape_javascript render :partial => "ibank" %>
      <% else params[:type] == 'cash' %>
    <% end %>
');

我来自：

<script type="text/javascript" src="/javascripts/voucher.js"></script>
<%= form_for(@income_voucher) do |f| %>
  <%= render 'shared/form_error', :object => @income_voucher %>
 <div >   
            <%= radio_button_tag :transaction_type,'cash', :checked => true %>
            <%= f.label :transaction_type, "Cash", :value => "cash" %>
            <%= radio_button_tag :transaction_type,'cheque' %>
            <%= f.label :transaction_type, "Cheque", :value => "cheque" %>
            <%= radio_button_tag :transaction_type,'card'%>
            <%= f.label :transaction_type, "Card", :value => "card" %>
            <%= radio_button_tag :transaction_type,'ibank'%>
            <%= f.label :transaction_type, "Internet Banking", :value => "ibank" %>
          </div>
      <div id = "payment_mode">
          <% if params[:type]== "cheque" %> 
                <%= render :partial => "cheque", :f => f %> 
          <% elsif params[:type]=='card' %> 
                <%= render :partial => "card", :f => f %>
          <% elseif params[:type] == 'ibank'%> 
              <%= render :partial => "ibank", :f => f %>
          <% else params[:type] == 'cash' %> 
       <% end %>
     </div>
  <%= f.submit %>
<% end %>

这是我的控制器方法：

 class IncomeVouchersController < ApplicationController
def new
    @income_voucher = IncomeVoucher.new
    @invoices = current_company.invoices
    @income_voucher.build_payment_mode

    respond_to do |format|
      format.html # new.html.erb
      format.xml  { render :xml => @income_voucher }
    end
  end
 def create
    @income_voucher = IncomeVoucher.new(params[:income_voucher])

   transaction_type = params[:transaction_type]
    payment_mode = nil
    if transaction_type == 'cheque'
      payment = ChequePayment.new(params[:cheque_payment])
    payment.amount = @income_voucher.amount
    elsif transaction_type == 'card'
      payment = CardPayment.new(params[:card_payment])
    payment.amount = @income_voucher.amount
    elsif transaction_type == 'ibank'
      payment = InternetBankingPayment.new(params[:internet_banking_payment])
    payment.amount = @income_voucher.amount
    else
      payment = CashPayment.new
    payment.amount = @income_voucher.amount
    end
    payment_mode = PaymentMode.new
    payment_mode.transactionable = payment

    @income_voucher.payment_mode = payment_mode
    respond_to do |format|
      if @income_voucher.save

        format.html { redirect_to(@income_voucher, :notice => 'Income voucher was successfully created.') }
        format.xml  { render :xml => @income_voucher, :status => :created, :location => @income_voucher }
      else

        format.html { render :action => "new" }
        format.xml  { render :xml => @income_voucher.errors, :status => :unprocessable_entity }
      end
    end

   def income_voucher_partial
       @payment_mode = PaymentMode.new(params[:payment_mode])
  end 
 end

我可以看到我的视图表单，但是当选择一个单选按钮时，什么都没有渲染。任何帮助将不胜感激

Answer 1

首先：选择方法 - 或使用远程表单或ajax提交。如果您希望该用户选择单选按钮并单击“提交”以在.html.erb中使用：

form_for(@income_voucher, :remote => true)

删除javascript ajax并将.js.erb中的param名称更改为：transaction_type

如果你想要那个用户选择单选按钮并立即渲染将javascript ajax移动到这样的单选按钮更改事件处理程序

$(your_element).change(function(){
  $.ajax(){
    url : "/income_vouchers/income_voucher_partial",
    data: { 
      type: $('form input[type=radio]:checked').val() 
    }
  }
});

并从直接url中删除params设置 - 在'data：'

中设置params

Answer 2

在我的js.erb文件中我做了这个

$(".gradeU").remove();
    $("#abcd").after(  

    '<%= escape_javascript render :partial => params[:payment] unless params[:payment] == 'cash' %>'
    );

在我的剧本中：

$(document).ready(function(){
$("#check").click(function(){

 var payment = $('form input[type= radio]:checked').val()

 console.debug(payment); 

 $.ajax({

   type: 'GET',

   url : "/income_vouchers/income_voucher_partial?payment="+payment,

 });

 });
 });

并且我没有在表单中呈现相同的代码，谢谢

如何在单选按钮选择中使用ajax在rails 3.0中渲染局部？

2 个答案: