Rails中通过AJAX调用更新实例变量以在表单中显示

Question

这就是我正在尝试做的事情：

1. 用户粘贴 URL。
2. 用户粘贴的输入框有一个 :onpaste 会触发 urlPasted() 函数。
3. urlPasted()函数提交输入框所在的表单，该表单对名为lookup_profile的自定义函数进行AJAX调用。
4. 在控制器中，lookup_profile函数执行一些网络请求，然后更新一些实例变量。
5. 一旦更新这些变量（需要大约 5 秒），视图就会有一个函数等待 20 秒，并使用这些实例变量的结果更新模态上的文本框。

这是我迄今为止所看到的：

  <%= form_tag url_for(:controller => 'users', :action => 'lookup_profile'), id: "profileLookupForm", :method => 'post', :remote => true, :authenticity_token => true do  %>
      <div class="form-group row">
        <div class="col-sm-12">
          <%= text_field_tag "paste_data", nil, onpaste: "profileURLPasted();", class: "form-control"%>
        </div>
      </div>
  <% end %>

  <script type="text/javascript">
      function profileURLPasted() {
        // Once the user pastes data, this is going to submit a POST request to the controller.
        setTimeout(function () { 
            document.getElementById("profileLookupForm").submit();
        }, 100);
        setTimeout(function () { 
            prefillForm();
        }, 20000);
      };

    function prefillForm() {
    // Replace company details.
    $('#companyNameTextBox').val("<%= @company_name %>");
  };
  </script>

控制器如下所示：

  def lookup_profile
    # bunch of code here
    @company_name = "Random"
  end

现在这是我遇到的问题。当用户粘贴数据时，它会完美提交到 custom_action LookupProfile。然而，当lookupProfile运行其代码后，rails不知道接下来要做什么。我的意思是它给了我这个错误：

Users#lookup_profile 缺少此请求格式的模板并且 变体。 request.formats: ["text/html"] request.variant: []

事实上，我实际上在

views/users/lookup_profile.js.erb

有一个文件。由于某种原因，它正在尝试呈现 HTML 版本。我不知道为什么。

其次，我尝试将其放入控制器中：

    respond_to do |format|  
        format.js { render 'users/lookup_profile'}
    end

但这会导致此错误：

ActionController::UnknownFormat

我只想运行自定义函数，更新实例变量，然后让我用该数据更新当前表单。

这是我正在尝试执行的类似操作的另一个 Stack Overflow 参考：Rails 通过 ajax 提交表单并更新视图但此方法不起作用（获取操作控制器错误）

编辑1

好的，所以我通过将 form_tag 替换为以下内容来修复 ActionController 错误：

<%= form_tag(lookup_profile_users_path(format: :js), method: :post, :authenticity_token => true, id: 'profileLookupForm', remote: true) do %>

但现在它实际上将实际的 JavaScript 渲染到视图中，而我不希望这样。我只是希望能够访问在lookup_profile操作中更新的实例变量，而不是显示视图。

编辑2

所以我认为我的问题归结为：在表单中放置一个按钮并从 IT 提交与提交表单的 JavaScript 代码不同。如果我能弄清楚这是怎么回事，那么我想我的状态可能会很好。

Answer 1

你在那里混合了一些东西。首先，您应该执行ajax请求，而不是执行

document.getElementById("profileLookupForm").submit()

，我猜

submit()

方法会忽略rails中的

remote: true

指令。

因此，将提交更改为：

form = getElementById("profileLookupForm");
$.post(form.action, {paste_data: this.value}, 'script')
// form.action is the url, `this` is the input field, 'script' tells rails it should render a js script

这样请求是异步完成的，并且响应不会替换当前页面。

现在，我认为您正在混合的是

@company_name

不会随该 ajax 请求而改变。当您渲染表单和其他所有内容时，

@company_name

会被替换为那一刻的实际值，并且在您发布请求后不会更改，因为引用丢失了。所以这一行：

$('#companyNameTextBox').val("<%= @company_name %>");

将会

$('#companyNameTextBox').val("");

一直以来。

您想要的是用一个脚本进行响应，该脚本用您设置的值更新字段

@company_name

（另外，任意等待 X 秒是一种非常糟糕的做法）。

所以，不要这样回应：

format.js { render 'users/lookup_profile'}

使用您要执行的代码创建一个视图

lookup_profile.js

$('#companyNameTextBox').val("<%= @company_name %>");

这里，

@company_name

实际上是您之前告诉的那些请求获得的值，脚本是在此刻生成并作为请求的响应执行的。