Javascript jQuery根据下拉列表中的选定项更新rails表单部分

在我的rails应用程序中，我有一个下拉菜单，用户可以选择要向其付款的帐户：

    //_payment.html.erb

     <div class="field" id="payment-to-account">
      <%= f.label 'Payment To:' %><br>
      <%= f.collection_select :to_account_id, @liability_account_payment_list, :id, :account_details, {include_blank: 'Please Select'} %>
    </div>

由于rails在后台预加载了部分，因此在case语句中对我的部分渲染进行以下更改仍然不起作用：

由此

  $('#to-account-form').html("<%= j render 'payment_to_mortgage', f: @f %>");

对此

  $('#to-account-form').html("<%= j render 'payment_to_mortgage', f: @f, @payment_to_account: @payment_to_account %>");

我进行了一些搜索，发现使用AJAX可能会有所帮助：

但是我试图访问模型，而不是控制器，我试图更新一个部分表单。正确的方法是什么

下面是显示用户流程的图片。在最后一张图片中可以看到我正在尝试更新的示例。选择抵押账户时，需要显示抵押账户的最低付款额。现在它说零，因为部分渲染包含来自BOA seed 0214的所有信息

---

如果您想从前端javascript内部的模型中访问记录信息，您确实需要设置一个小api来查询数据库中的信息。在ajax中是这样的

function processDataFunction(data){
  console.log(data)
}

$.ajax({
  type: "GET",
  dataType: "json",
  url: "/some-path/:some_id",
  success: processDataFunction(data){}
});



#config/routes.rb
Rails.application.routes.draw do
  get "/some-path/:some_id", to: "some_controller#some_view", :defaults => { :format => :json }
end

#app/controllers/some_controller.rb
class SomeController < ApplicationController
  def some_view
    @some_records = SomeModel.find_by_id(params[:some_id])
    respond_to do |format|
      format.json { render json: @some_records }
    end
  end
end

---

为了在不执行其他控制器操作的情况下访问渲染部分中的信息，我收集了原始操作中可能需要的所有数据。这样，我就可以得到我想要的确切结果，而无需更改路由和执行ajax请求

为此，我向控制器新操作添加了方法。您可以从我的原始问题中看到，我可能需要的所有帐户信息都在下拉菜单中的变量中：

@liability_account_payment_list

这是下拉菜单获取信息的地方

该变量位于事务控制器新操作中。因此，我创建了另一个变量，在上述变量之后的行中存储一个数组：

@liability_accounts_payment_list_minimum_payments = @liability_account_payment_list.map {|account| account.minimum_payment.to_f + account.minimum_escrow_payment.to_f}

这个新变量是一个数组，包含所有帐户的最低付款额，按用户将从中选择的下拉菜单中列出的顺序排列

然后我将页面上的jQuery更改为

//_payments.html.erb
<script>

jQuery(function(){

  $("#payment-to-account").change(function() {
    var selected_item = $( "#payment-to-account option:selected" ).text();
    var selected_item_index = $( "#payment-to-account option:selected" ).index(); 
    //looks for something in parentheses followed by space moneysign " $"
    var regExp = /\(([^)]+)\)\s\$/;
    var matches = regExp.exec(selected_item);

    // array of minimum payments from accounts in list converted from ruby to js
    var min_payments = <%= raw @liability_accounts_payment_list_minimum_payments %>;
    // set the js variable to the appropriate minimum payment
    var selected_account_min_payment = min_payments[selected_item_index-1];

    switch (matches[1]) {
      case 'Mortgage':
        $('#to-account-form').html("<%= j render 'payment_to_mortgage', f: @f %>");

        $("#min-payment-field-hidden").val(selected_account_min_payment);
        $("#min-payment-field").html(selected_account_min_payment);

        $('#to-account-form').slideDown(350);
        break;
      case 'PersonalLoan':
      case 'CreditCard':
      case 'StudentLoan':
      case 'OtherLiability':
        $('#to-account-form').html("<%= j render 'payment_to_all_other_liabilities', f: @f %>");

        $("#min-payment-field-hidden").val(selected_account_min_payment);
        $("#min-payment-field").html(selected_account_min_payment);

        $('#to-account-form').slideDown(350);
        break;
      default:
        $('#to-account-form').html("<br>" + "Contact support, an error has occurred");
        $('#to-account-form').slideDown(350);
    }
  });

});

</script>

现在，用户可以看到他们从下拉列表中选择的特定帐户的最低付款额

@liability_accounts_payment_list_minimum_payments = @liability_account_payment_list.map {|account| account.minimum_payment.to_f + account.minimum_escrow_payment.to_f}

//_payments.html.erb
<script>

jQuery(function(){

  $("#payment-to-account").change(function() {
    var selected_item = $( "#payment-to-account option:selected" ).text();
    var selected_item_index = $( "#payment-to-account option:selected" ).index(); 
    //looks for something in parentheses followed by space moneysign " $"
    var regExp = /\(([^)]+)\)\s\$/;
    var matches = regExp.exec(selected_item);

    // array of minimum payments from accounts in list converted from ruby to js
    var min_payments = <%= raw @liability_accounts_payment_list_minimum_payments %>;
    // set the js variable to the appropriate minimum payment
    var selected_account_min_payment = min_payments[selected_item_index-1];

    switch (matches[1]) {
      case 'Mortgage':
        $('#to-account-form').html("<%= j render 'payment_to_mortgage', f: @f %>");

        $("#min-payment-field-hidden").val(selected_account_min_payment);
        $("#min-payment-field").html(selected_account_min_payment);

        $('#to-account-form').slideDown(350);
        break;
      case 'PersonalLoan':
      case 'CreditCard':
      case 'StudentLoan':
      case 'OtherLiability':
        $('#to-account-form').html("<%= j render 'payment_to_all_other_liabilities', f: @f %>");

        $("#min-payment-field-hidden").val(selected_account_min_payment);
        $("#min-payment-field").html(selected_account_min_payment);

        $('#to-account-form').slideDown(350);
        break;
      default:
        $('#to-account-form').html("<br>" + "Contact support, an error has occurred");
        $('#to-account-form').slideDown(350);
    }
  });

});

</script>

//_payment.html.erb
<-- To make sure the appropriate minimum payment is submitted to controller -->
<%= f.hidden_field :amount, :id => "min-payment-field-hidden" %>

<div>
  <%= f.label "Minimum Payment" %>
  <div id="min-payment-field"></div>
</div>

$("#min-payment-field-hidden").val(selected_account_min_payment);
$("#min-payment-field").html(selected_account_min_payment);