Occasionally, altering the visibility of an element right before submitting a form in Safari may not be effective

Question

Occasionally, altering the visibility of an element right before submitting a form in Safari may not be effective

Below is the HTML element I'm using to show a loading spinner in my app, with mostly Bootstrap classes:

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

Here is the form on view (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 %>

Here's the JavaScript function 'finish()' where we display the loading spinner:

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

Everything works smoothly in Chrome and Firefox, but sometimes the spinner fails to appear in Safari.

I've checked with console logs (

console.log(document.querySelector('#loadSpinner'))

) and confirmed that the 'invisible' class is indeed removed before submission. The JavaScript is functioning correctly, yet the spinner is not visible in Safari.

I even tried adding a 'visible' class after removing 'invisible', but the issue persists.

Does anyone have insight into why this might be happening specifically in Safari?

My theory is that perhaps the submission occurs before the 'invisible' class is fully removed, but I'm unsure how to verify and address it.

javascript ruby-on-rails bootstrap-4 safari

Answer 1

Answer №1

When utilizing Rails UJS, you have the option to leverage the ajax:beforeSend and ajax:complete events for toggling a spinner:

<%= 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');
});

If you're customizing it yourself, make sure to prevent the default event handler:

<%= 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');
     });
});

In case this is not an XHR (ajax) request, remember that script execution stops upon page reload.

Answer 2

When utilizing Rails UJS, you have the option to leverage the ajax:beforeSend and ajax:complete events for toggling a spinner:

<%= 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');
});

If you're customizing it yourself, make sure to prevent the default event handler:

<%= 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');
     });
});

In case this is not an XHR (ajax) request, remember that script execution stops upon page reload.

Answer 3

Answer №2

It appears that Safari requires a slight delay before submitting a form.

To address this issue, try the following solution:

Modify the submit button to a simple button within the form:

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

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

<% end %>

Introduce a slight delay when submitting the data:

function finish() {
  ...
  document.querySelector('#loadSpinner').classList.remove('invisible');
  
  // submit form
  setTimeout(function() {
    document.querySelector('form').submit();
  }, 300);  
}

Answer 4

It appears that Safari requires a slight delay before submitting a form.

To address this issue, try the following solution:

Modify the submit button to a simple button within the form:

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

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

<% end %>

Introduce a slight delay when submitting the data:

function finish() {
  ...
  document.querySelector('#loadSpinner').classList.remove('invisible');
  
  // submit form
  setTimeout(function() {
    document.querySelector('form').submit();
  }, 300);  
}

Occasionally, altering the visibility of an element right before submitting a form in Safari may not be effective

Answer №1

Answer №2

Similar questions

How can you retrieve command line variables within your code by utilizing npm script in webpack?

Using Selenium to trigger a click event on an ng-click directive in AngularJS is not functioning properly

What is the best way to ensure a jQuery function runs on duplicated elements?

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

Apply a Fade In transition to the ul li elements following a JavaScript toggle

Trigger a child-mounted event and retrieve it from the parent component

The :before element is not displaying when using jQuery's slideToggle() method

Using R plotly to show an image when hovering over a location on a map

Strings holding special arrangements of breaks in between

Tracking progress for uploading big files

What is preventing Angular's $scope from being modified?

(Angular) Employing *ngFor directive for populating a table

Searching for substrings in NodeJS using Express

Error encountered: Unable to access the 'Lastname' property as it is undefined

When accessing tagName in Internet Explorer 11, the name will be returned in uppercase with the namespace included. However, in Internet Explorer 7,

How to eliminate certain elements from the DOM in Angular 5

Comparison between WAMP and Live server integration with Facebook for connecting applications

Tips for partitioning an element using Selenium and Appium when it lacks a distinctive ID, class, package, or resource identifier:

Dependency management in ReactJS components

Discover results while inputting in the search box