javascript在rails 6中提交表单后，控制器中的更新操作未启动update.js.erb答案

【问题标题】：After javascript submits form in rails 6 the update action in controller not launching update.js.erbjavascript在rails 6中提交表单后，控制器中的更新操作未启动update.js.erb
【发布时间】：2020-01-30 14:55:45
【问题描述】：

不确定我是否问错了这个问题，但我似乎无法准确找到我面临的问题。

我有一个用于任务列表的非常基本的 rails 6 应用程序。任务要么完成，要么不完整，更改/更新将通过 javascript 完成（html 端工作正常）。

这是我的表单部分 _task.html.erb：

<%= form_with model: task, html: { class: "edit_task", id: "edit_task_#{task.id}" } do |f| %>
  <%= f.check_box :complete %>
  <%= f.submit "Update" %>
  <%= f.label :complete, task.name %>
  <%= link_to "(remove)", task, method: :delete, data: {confirm: "Are you sure?"}, remote: true %>
<% end %>

这里是提交表单的javascript，tasks.js

function submit_update(){
    const checkboxes = document.querySelectorAll('.edit_task input[type=checkbox]');
    const submitbutton = document.querySelectorAll('.edit_task input[type=submit]');

    submitbutton.forEach(button => button.remove());

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', () => checkbox.parentElement.submit());
    });
}

window.addEventListener('turbolinks:load', event => {
    submit_update();
    document.addEventListener('task_added', event => submit_update());
});

这部分工作得很好，但是一旦提交并基于控制器的这一部分

  def update
    @task.update!(task_params)
    respond_to do |format|
      format.html { redirect_to root_url, notice: 'Task successfully updated' }
      format.js
    end
  end

我的理解是这应该一起启动 update.js.erb，目前看起来像

unction update_task() {
  const current_task = document.querySelector('#edit_task_<%= @task.id %>');
  const complete_tasks = document.querySelector('#complete_tasks');
  const incomplete_tasks = document.querySelector('#incomplete_tasks');

  <% if @task.complete? %>
    complete_tasks.insertAdjacentHTML('beforeend',current_task.innerHTML);
  <% else %>
    incomplete_tasks.insertAdjacentHTML('beforeend',current_task.innerHTML);
  <% end %>
}

update_task();

我尝试使用警报调用将上述内容更改为单行，但它仍然永远不会被调用。

如果有人可以让我知道为什么没有调用 update.js.erb，将不胜感激 :)

如果需要任何其他信息，请告诉我？

编辑：

在进一步测试中，我发现如果我通过单击按钮提交更新，即通过 javascript 删除提交，则 update.js.erb 操作正确。

所以看起来重点需要放在 tasks.js 文件上，以及它是如何提交的？奇怪的是，当它包含在内时，提交后 HTML 格式运行正常，而不是 js 格式？？

【问题讨论】：

标签： javascript ruby-on-rails-6

【解决方案1】：

在尝试获得正确的搜索词数天后，我找到了解决方案并乐于提交给其他人查找:)

魔法可以找到here

我的例子的变化如下--

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', () => checkbox.parentElement.submit());
    });

// becomes

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', event => {
            checkbox.parentElement.dispatchEvent(new Event('submit', {bubbles: true}));
        });
    });

我已经编辑了 update.js.erb（做同样的事情，只是更干净一点），但它也需要为新添加的项目添加一个额外的条目以触发条目更改位置：

$ cat app/views/tasks/update.js.erb 
function update_task() {
  const current_task = document.querySelector('#edit_task_<%= @task.id %>');
  const to_task = document.querySelector('#<%= @task.complete? ? "complete_tasks" : "incomplete_tasks" %>');

  // Remove from previous list
  current_task.remove();

  // Append to the end of new list
  to_task.insertAdjacentHTML('beforeend', '<%= j render(@task) %>');

  // Advise tasks.js that new entry needs listener added
  to_task.dispatchEvent(new Event('task_added', { bubbles: true }));
}

update_task();

希望其他人觉得这很有用:)

【讨论】：