Rails multi step form with Javascript – browser back button behavior

Question

I have 1 form that I've separated into multiple divs, each with their own Next button.

Upon clicking "Next" some javascript fires (see below) that hides the current div and unhides the next div (i.e. next step in the form). The URL is also updated with an # and the name of the step (e.g. example.com/booking turns into example.com/booking#contact-info)

  $('#booking-details-complete').click(function(event) {  
    $("#booking-details").css("display", "none");
    $("#contact-info").css("display", "block"); 
  });

The Next button code that fires this JS is:

<%= link_to "Next", '#contact-info', :id => "booking-details-complete"%>

The final piece of the form has a Submit button instead of a Next button, which sends one big POST request to the various models.

My problem is back button behavior: going back doesn't update the page. The URL changes correctly, but the parts of the form (i.e. the divs) don't update their show/hide state.

I'm so close to finishing this project, but just can't figure out this last piece. Any help much appreciated.

I meant the browser's back button. I don't have a back button specifically for the form. — Trevor McKendrick, Commented Jan 17, 2014 at 20:01
ok, then the problem is, that you get routed back to the initial state of the page, when getting linked back. How do you try to persist the state? — ernd enson, Commented Jan 17, 2014 at 20:02
I've tried using pushState in jQuery but couldn't get it working. Other than that not persisting state. How would I save the div state for a particular URL? — Trevor McKendrick, Commented Jan 17, 2014 at 20:03
as far as i know, there is no possibility to achieve your goal, if pushState isn't working — ernd enson, Commented Jan 17, 2014 at 20:15

drillprp · Accepted Answer · 2014-01-17 20:17:21Z

1

So you mean hitting "back" on your browser updates your hash in the URL properly, but your page remains static with the desired behavior being that the section you are on collapses and the previous one re-opens?

You need a hash listener, there isn't a particularly standard way of getting one I don't believe. Push and Pop history just manipulate the history stack, it won't give you what you want.

Once you have a hash listener you have to write a JS function that can set your page state based on the hash of the URL.

I've never implemented a hash listener so here's something I found that might help http://benalman.com/projects/jquery-hashchange-plugin/

answered Jan 17, 2014 at 20:17

drillprp

314 bronze badges

"So you mean hitting 'back' on your browser updates your hash in the URL properly, but your page remains static". 100% correct. The desired behavior is that the divs to that part of the form will unhide, and the divs previously showing will hide themselves. I'll look at hash listeners, hadn't heard of that until now.
– Trevor McKendrick
Commented Jan 17, 2014 at 20:20
It should be marked, that this plugin does not work with jQuery versions higher than 1.9.
– ernd enson
Commented Jan 17, 2014 at 20:21
1

To my knowledge, most of the time people need hash listening functionality, they're already using a front-end JS framework.. such as Marionette, Angular, Etc. These usually comes with a "router" that updates the page based on the URL hash. It woudn't hurt you to put that page state updater function in the page load as well.
– drillprp
Commented Jan 17, 2014 at 20:22
1

Also, agreed ernd. As I mentioned, I don't know of a hash listening library that's outside of a front-end JS framework. Just something to help point him in the right direction.
– drillprp
Commented Jan 17, 2014 at 20:23
Thanks for the help on this. To make sure I understand since I'm new... 1. Hash listener gets loaded every time the URL refreshes 2. Hash listener calls specific JS code based on the URL 3. JS updates the state of the page
– Trevor McKendrick
Commented Jan 17, 2014 at 20:27

| Show 1 more comment

Collectives™ on Stack Overflow

Rails multi step form with Javascript – browser back button behavior

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related