I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form:
- The submit button should display an animated font-awesome spinner and change text to "Submitting...".
- The button must be disabled to prevent multiple form submissions.
The provided code functions perfectly in Google Chrome:
<%= f.button "Submit", class: "btn btn-success", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Submitting..."} %>
However, in Safari:
- The button is disabled successfully.
- But, the spinner icon doesn't appear and the text remains unchanged.
To demonstrate this issue, I created a small application. You can find the repository here. Try submitting the `blog` form in Chrome and then in Safari to see that the animation only works in Chrome.
I came across this jquery_ujs issue, which offers some complex workarounds but no convenient solution applicable to all scenarios where I want to include this functionality.
This seems to be a browser-related problem. For instance, Safari may avoid certain processing tasks post-form submission to maintain efficiency.
Chris Oliver from GoRails pointed out that executing the following command in the console triggers the desired effect even in Safari:
$.rails.disableFormElement($("button"))
This proves that the effect works in Safari, but binding it to a form submission button causes issues. I tested this with Safari versions 9.1.2 and 10.0.1, as well as Rails 4.2.6 and Rails 5.