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