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

Question

在我的 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>

当用户选择一个帐户时，我会根据他们的选择在该表单内部呈现部分内容:

    //_payment.html.erb
    <%= form_for(@transaction, 
             as: :transaction,
             url: 
             @transaction.id ? account_transaction_path(@account, @transaction) : account_transactions_path) do |f| %>

    ...

    <% @f = f %>
    <div id="to-account-form" style="display:none;"></div>

    ...
    <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 account type in parentheses followed by space moneysign " $"
        var regExp = /\(([^)]+)\)\s\$/;
        var matches = regExp.exec(selected_item);

    // array of account ids in order of list
    var payment_account_ids = <%= raw @payment_list_ids %>;

    switch (matches[1]) {
      case 'Mortgage':
        $('#to-account-form').html("<%= j render 'payment_to_mortgage', f: @f %>");
        $('#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 %>");
        $('#to-account-form').slideDown(350);
        break;
      default:
        $('#to-account-form').html("<br>" + "Contact support, an error has occurred");
        $('#to-account-form').slideDown(350);
        }
      });

    });

    </script>

现在它根据选择呈现正确的部分，但是当部分加载时我需要来自帐户模型的更多信息。我创建了一个名为 find_pay_to_account 的方法，该方法采用帐户模型中输入的选定帐户 ID，该模型根据 ID 查找帐户。

当用户从下拉列表中选择帐户时，我希望在加载的部分调用该方法，以便我可以在用户提交表单之前向用户显示有关他们正在付款的帐户的其他信息。但我不知道怎么办。我想将类似这样的内容添加到我的 jQuery switch 语句中。

    selected_account_id = payment_account_ids[selected_item_index-1]
    @payment_to_account = Account.find_pay_to_account(selected_account_id)

由于 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 可能会有所帮助:
Pragmatic Studio
Rails Cast

但我正在尝试访问模型，而不是 Controller ，并且我正在尝试更新部分表单。这样做的正确方法是什么？

这是显示用户流程的图片。在最后一张照片中可以看到我正在尝试更新的示例。选择抵押账户时，需要显示抵押账户的最低还款额。现在它显示为零，因为使用 BOA 种子 0214 的所有信息进行局部渲染。

Answer 1

如果您想在前端 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