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

问题描述

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

用户粘贴 URL。
用户粘贴的输入框有一个 :onpaste 触发 urlPasted() 函数。
urlPasted() 函数提交输入框所在的表单，该表单对名为lookup_profile 的自定义函数进行AJAX 调用。
在控制器中，lookup_profile 函数执行一些 Web 请求，然后更新一些实例变量。
一旦这些变量被更新（大约需要 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

任何帮助将不胜感激。我只想运行自定义函数，更新实例变量，然后让我用该数据更新当前表单。

这是我正在尝试做的类似事情的另一个 stackoverflow 参考：Rails 通过 ajax 提交表单并更新视图，但此方法不起作用（获取 actioncontroller 错误）

* 编辑 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 代码不同。如果我能弄清楚这是怎么回事，那么我想我的状态可能很好。

标签： javascriptruby-on-railsajax

解决方案

你在那里混合了一些东西。首先，document.getElementById("profileLookupForm").submit()你应该做一个ajax请求，而不是做一个，我猜这个submit()方法忽略了remote: truerails的指令。

因此，将提交更改为：

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实际上将是通过您之前告诉的那些请求获得的值，脚本在此时生成并作为请求的响应执行。

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

问题描述

解决方案

推荐阅读