If it doesn't change with the disable_with option in Safari

When creating a form with Rails, you can prevent double submission by adding the disable_with option to the submit button.

= f.button 'Send', data: { disable_with: 'sending…' }

However, only in Safari, the wording of the button did not change for some reason. There are many reports on GitHub. disable_with doesn't work with link in Safari #306

solution

To write from the conclusion, I was able to avoid the mess by deliberately delaying the transmission process with JS. In the Issue, an example written in vanilla JS will appear, so if you are not using jQuery, it may be faster to refer to that.

= f.button 'Send', data: { disable_with: 'sending…' }, class: 'disable_with_safari'
$('.disable-with-safari').click(function (event) {
  if ($(this).data('disableWith')) {
    $(this).prop('disabled', true);
    $(this).text($(this).data('disableWith'));
    var form = $(this).closest('form');
    if (form.length) {
      event.preventDefault();
      setTimeout(() => form.submit(), 300);
    }
  }
});

Remarks

As discussed in the opening issue, Safari's unique specification seems to prevent the DOM from being updated once a submit has been run. (Since it is a comment on Issue, please refer to the primary information for the exact specifications.) Therefore, even if disable_with was added, the wording of the button did not change.

By the way, when I searched for this problem, the following solution came out, but in my case it didn't work.

--cursor: pointer; --Set an empty click event --Set an empty touchstart event --Change the binding to $ (document)

Recommended Posts

If it doesn't change with the disable_with option in Safari
It doesn't work if the Map key is an array
It doesn't respond to the description in .js of the packs file
What to do if validation doesn't work with the update action
What to do if the Rails page doesn't appear in Rails tutorial 1.3.2
Isn't it reflected even if the content is updated in Rails?
Place in the middle with css
Memo: [Java] If a file is in the monitored directory, process it.
If you have trouble with the character code problem in Myanmar (Burmese)
Change the layout when rotating with onConfigurationChanged
If the parameter is an array, how to include it in Stopara's params.permit
Get YouTube video information with Retrofit and keep it in the Android app.
Notify the build result with slack with CircleCI. You can do it in 5 minutes.