Databases
StackOverflow2013
Postsdbo
PORails Step by Step Forms - Almost converted to Ajax - Except for the Browser Back Button
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORails Step by Step Forms - Almost converted to Ajax - Except for the Browser Back Button
    primarykey
    data
    text
    <p>I am currently creating a step by step registration process on my website. </p> <p>The whole process has been successfully created with the exact same setup as seen on the rails cast here: <a href="http://railscasts.com/episodes/217-multistep-forms" rel="nofollow">http://railscasts.com/episodes/217-multistep-forms</a></p> <p>After I got all that working, I converted the whole thing to Ajax! With either the submit buttons or forms on each step, I simply added:</p> <pre><code>remote:true </code></pre> <p>Then, after adding the proper response handling:</p> <pre><code>respond_to do|format| format.js { render 'new' } format.html { render 'new' } end </code></pre> <p>In new.js.erb I have this:</p> <pre><code>$('#steps_content').fadeOut('fast', function(){ $('#steps_content').html("&lt;%= j render "#{@subscription.current_step}_step" %&gt;", $('#steps_content').fadeIn('fast', function(){}) ) }); </code></pre> <p>Here's new.html.erb:</p> <pre><code>&lt;div id='steps_content' &gt; &lt;%= render "#{@subscription.current_step}_step" %&gt; &lt;/div&gt; </code></pre> <p>Step by Step Ajaxified!</p> <p>Anyways, since the whole thing has been Ajaxified, I have been trying to get the <strong>Browser Back Button</strong> to go to my previous step as well as having an on page back button.</p> <p>I kind of get there by adding this to the beginning of my new.js.erb:</p> <pre><code>history.pushState( null, '', '#step=&lt;%= j "#{@subscription.current_step}" %&gt;' ); </code></pre> <p>And this to the end of it:</p> <pre><code>if (!$(window) || !$(window).data('events') || !$(window).data('events')['popstate']) { $(window).bind('popstate', function() { $.getScript(location.href); }); } </code></pre> <p>This has been causing me a fair amount of trouble! </p> <p>With the current setup: The JQuery Animation fires. Thought, it just fadeIn, fadeOut to the same step. I discovered the reason that happens was because all the step code is in the create action (post), not the new action (get) which is what the back button fires. Though even if I put the code in there, the back button in the browser doesn't throw in the :back_button parameter.</p> <p>I have been doing quite a bit of research on getting the Back Button to work with Ajax, but all of the cases I find do not really apply! This is partially because my whole setup changes the current_step in the controller code I guess. Even if I did put my controller code into the new action, the previous step wouldn't be loaded because there is no :back_button parameter. </p> <p>I guess my first question would be: <strong>Is there a way to add the :back_button parameter ONLY when the browser's back button is pressed?</strong></p> <p>That would be ideal, because then all of my current code would just work. I know one could add that param by binding to the ajax send callback somehow, but I ONLY want it to happen when the browser back button is pressed. I thought maybe I could bind to history.back somehow, but that doesn't seem possible. </p> <p>My main question: <strong>How can I fix this to get the browser to go back to the proper step?</strong> </p> <p>Can I somehow read the anchor param to set the current step? </p> <p>Am I going to have to change the entire method I use to go to each step?</p> <p>Maybe I am just failing and doing something wrong? </p> <p>I feel like I am so close! </p> <p>Thank you ahead of time fellow coders, any guides which point me in the the right direction, or any alternate methods which are prettier would also be helpful. Also, I don't want to use any Premade Plugins to accomplish this. </p> <p>If you need more information just let me know.</p> <p>Thanks! </p> <p><strong>EDIT:</strong></p> <p>I'm opening this up question up to possibly include decent pre-made plugins/gems/libraries which have a strong backing and are supported enough to go in a production environment.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBenjamin
    1. USBenjamin
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORails Step by Step Forms - Almost converted to Ajax - Except for the Browser Back Button
      1. USuday
      1. VTFavorite
    2. VO
      singulars
      1. PORails Step by Step Forms - Almost converted to Ajax - Except for the Browser Back Button
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PORails Step by Step Forms - Almost converted to Ajax - Except for the Browser Back Button
      1. USBenjamin
      1. VTBountyStart
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload