Skip to content

Re-enables buttons and links after going back #385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 8, 2014

Conversation

sobrinho
Copy link
Contributor

@sobrinho sobrinho commented Aug 7, 2014

Firefox has a weird behavior where when you hit the back button it keeps
the submit buttons and links on disabled state which even reloading the
page do not re-enables them.

Using the pageshow event, which is triggered every time a page loads, we
can keep the rails-ujs behavior consistent with all other browsers.

See https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching

[Fixes #357]

@sobrinho
Copy link
Contributor Author

sobrinho commented Aug 7, 2014

Hey @rafaelfranca and @lucasmazza, here is the PR and 3 hot dancers: 💃 💃 💃

It fixes the weird behaviour on Firefox, re-enabling links and submit buttons when going back on history, keeping the behaviour consistent across all browsers.

Like we said on #357, autocomplete=off fixes the problem but it fixes only partially, it fixes the reload button but do not restore the original state as jquery-ujs do on all other browsers.

Using the pageshow event we can restore the behaviour and keep the behaviour consistent across all browsers.

The suite is green on Firefox, Safari and Chrome, I do not have any other browsers but they are probably okay, would be great if someone else confirm that for sure.

@lucasmazza
Copy link
Contributor

This looks good. Using an event handler is way more isolated than messing with attributes, timeouts or anything like that. I'll dig into the pageshow docs later, but there are a few questions regarding this:

  1. This might fix similar disabled state issues with other browsers like Safari?
  2. What if an element is disabled intentionally in the page markup, will this enable it unintentionally? (Maybe I'm worrying too much here)

@rafaelfranca @JangoSteve any thoughts?

@sobrinho thanks a lot! ❤️ 💚 💙 💛 💜

@sobrinho
Copy link
Contributor Author

Well, this issue doesn't happen on Safari, at least not on Safari 7.

About intentionally disabled elements, it will be reenabled, but only for elements disabled by $.rails.disableFormElement and $.rails.disableElement which I think isn't supposed to be used manually at all.

Although, if someone wants to disable this behaviour because of that, it's possible just removing the listener:

$(window).off("pageshow.rails")

If we really want to handle that, we may use another data to identify manually disabled elements and automatic disabled elements, but I think it's unnecessary.

Other disabled elements won't be affected because $.rails.enableFormElement and $.rails.enableElement explicitly use ujs:enable-with to reenable them.

// See https://github.com/rails/jquery-ujs/issues/357
// See https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
$(window).on("pageshow.rails", function () {
$.rails.enableFormElement($($.rails.enableSelector))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of enabling all elements I think we should look through all elements matching the $.rails.enableSelector and checking if they have been disabled by Rails just like we are doing with the $.rails.linkDisableSelector ones.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sobrinho what do you think of this one?

@lucasmazza
Copy link
Contributor

FWIW I managed to reproduce this with Safari 7.0.6 (9537.78.2), OS X 10.9.4 and this HTML.

Firefox has a weird behavior where when you hit the back button it keeps
the submit buttons and links on disabled state which even reloading the
page do not re-enables them.

Using the pageshow event, which is triggered every time a page loads, we
can keep the rails-ujs behavior consistent with all other browsers.

See https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching

[Fixes rails#357]
@sobrinho
Copy link
Contributor Author

@lucasmazza take a look again :)

@sobrinho
Copy link
Contributor Author

@lucasmazza I'm still not able to reproduce on Safari using your gist. When I submit and hit the back button, the button is enabled as it should be.

@lucasmazza
Copy link
Contributor

@sobrinho which Safari version? Same minor/patch numbers as mine?

@sobrinho
Copy link
Contributor Author

Exactly the same combo: Safari 7.0.6 (9537.78.2) + OS X 10.9.4 😐

@lucasmazza
Copy link
Contributor

@sobrinho accessing it through a local web server instead of the file:// protocol replicates this issue every time

lucasmazza added a commit that referenced this pull request Sep 8, 2014
Re-enables buttons and links after going back
@lucasmazza lucasmazza merged commit 60eb6a8 into rails:master Sep 8, 2014
@ain
Copy link

ain commented Mar 24, 2017

Reproduced on latest jquery-ujs 1.2.2, macOS 10.12.3 Firefox 52.

$(window).off("pageshow.rails") did not resolve.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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