时间戳

首页 > 解决方案 > 在 Safari 中提交表单之前更改元素可见性有时不起作用

javascript - 在 Safari 中提交表单之前更改元素可见性有时不起作用

问题描述

这是我用来在整个应用程序中显示加载微调器的 html 元素（处于其原始状态）（主要使用 Bootstrap 类）：

<div id="loadSpinner" class="overlay d-flex justify-content-center invisible">
  ...
</div>

这是视图中的表格（Rails 6）：

  <%= form_with(url: result_path, 
      method: "patch", local: true) do |f| %>

    ...

    <%= f.submit "Finish", class: "btn btn-success btn-lg my-3",
        onclick: "finish();" %>

  <% end %>

这是加载微调器显示的 'finish()' js 函数：

function finish() {
  ...
  document.querySelector('#loadSpinner').classList.remove('invisible');
}

它在 Chrome 和 Firefox 中运行良好，但加载微调器有时不会在 Safari 中显示。

我添加了一些日志（console.log(document.querySelector('#loadSpinner'))在“不可见”类删除之后）并且可以看到“不可见”类在提交之前实际上已被删除。所以 js 代码工作正常，但微调器只是没有出现。

此外，我尝试在删除“不可见”类后添加一个“可见”类 - 问题仍然存在。

有人知道为什么会在 Safari 中发生吗？

我有一个假设，实际上提交是在实际删除“不可见”类之前以某种方式发生的，但我不知道检查和修复它的方法。

标签： javascriptruby-on-railsbootstrap-4safari

解决方案

如果您使用的是 Rails UJS，您可以使用ajax:beforeSend和ajax:complete事件来切换微调器：

<%= form_with(url: result_path, method: "patch", remote: true, class: 'spinner-form') do |f| %>

let form = document.querySelector('#myForm');
let spinner = document.querySelector('#loadSpinner');

document.addEventListener('ajax:beforeSend', (event)=>{
  if (!event.target.matches('.spinner-form)) return;
  spinner.classList.remove('invisible');
});

document.addEventListener('ajax:complete', (event)=>{
  if (!event.target.matches('.spinner-form)) return;
  spinner.classList.add('invisible');
});

如果你自己做，你想阻止默认事件处理程序：

<%= f.submit "Finish", class: "btn btn-success btn-lg my-3",
        id: "myButton" %>

let btn = document.querySelector('#myButton');
let spinner = document.querySelector('#loadSpinner');

btn.addEventListener('click', (event)=>{
  let form = event.target.form;
  event.preventDefault();
  spinner.classList.add('invisible');

  fetch(form.action)
    .then((response)=>{
       spinner.classList.remove('invisible');
     });
});

如果这不是 XHR (ajax) 请求，那么当页面重新加载时脚本执行停止时，这将无法正常工作。

推荐阅读