data-disable-with keeps the button disabled when the user hit browser's back button

[sobrinho]

If the user hits the browser's back button after submitting a form, the submit button is kept disabled, we must refresh the page to the restore the button state.

I found this workaround which seems to be working: [I lost the link]

It happens on Safari and Firefox, Chrome is fine.

Not sure about other browsers, I do not have any other here :)

[pekeler]

I can't read that workaround.
If you serve up your pages such they aren't cached by the browser, it'll solve this problem.
http://www.fordevs.com/2011/10/how-to-prevent-browser-from-caching-a-page-in-rails.html

[lacco]

@sobrinho : Could you give more details to your workaround? It seems that I stumpled upon this same issue, although it occurs to me when reloading the page instead of hitting the back button.

[sobrinho]

I posted the wrong link.

The workaround I've seen is to set autocomplete="off" on submit buttons.

[lacco]

Wow, you are totally right, using something like <input type="submit" autocomplete="off" ... /> fixes the issue. It seems to be some Firefox quirk, e.g. the same issue also exists in bootstrap: twbs/bootstrap#793 . I suggest closing the issue since this is nothing that jquery-ujs should fix?

[sobrinho]

I think it should be fixed by jquery-ujs, we just need to set autocomplete attribute automatically on data-disable-with inputs, something like that:

<input type="submit" data-disable-with="Loading...">

Automatically goes to:

<input type="submit" data-disable-with="Loading..." autocomplete="off">

If it is okay, I can make a pull request :)

[lucasmazza]

I'm not comfortable with pushing hacks like this with the JS code. Maybe there is somewhere in the Rails docs/guides that we add a note about this similar to what was done in Bootstrap? /cc @rafaelfranca

[sobrinho]

Yeah, I'm not comfortable either but considering the data-disable-with is broken, you should fix it yourself vs. data-disable-with just works and you should not care about anything, I prefer the later.

This hack is harmless and since it will not cause any side-effect, I'm okay with it.

[rafaelfranca]

Browsers... ¯_(ツ)_/¯

What is broken here are the browsers. The data-disable-with feature is working fine for browsers that do not do sourcery and only work with autocomplete=off (that by the way, is completely no sense).

I don't want to add this hack to jquery-ujs too but I agree it is harmless and may save some time of people. It may be worth to add even if it is browsers fault.

[sobrinho]

So, can I make a pull request? 😻

[rafaelfranca]

Yes. It will help to decide if it is worth or not.

[sobrinho]

See #385

[rdp]

I just ran into this myself, this might be nice to ensure cross browser similar behavior...

[coderdave]

This is an old issue, but this is still occurring for me in, even in v4.1.1. The only difference is that it's not an input, it's just a regular link "button":

<%= link_to "<i class='fa fa-plus fa-inverse'></i>".html_safe, new_appointment_path,
    class: "btn btn-success new pull-right", data: { disable_with: "<i class='fa fa-spinner fa-spin'></i>" },
    id: "new_appointment_button", title: "New Appointment" %>

On first click, it spins, but when you hit the back button in Chrome for example, it stays spinning. Maybe something to do with turbolinks?