Back-button friendly ajax wizard navigation

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Back-button friendly ajax wizard navigation

Brian Laframboise
I have a Page with a Wizard component. Currently using the next and previous
buttons perform full-page (non-ajax) form submissions which has the
necessary side-effect of being back-button friendly.

I implemented an ajax version of the Wizard in order to get faster
validations. That part works great - however, back button support is broken.
(Clicking the browser back button brings the user to the page before the
wizard page, instead of going back one page in the wizard).

Is there a way I can use Wicket's ajax form support to have these faster
validations while not breaking the back button? I tried doing:

protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
    if( target != null ) {
        ...
        setRedirect(true)
    }
}

to redirect the response in order to create a browser history entry. It
didn't work, so clearly there's something fundamental here that I don't
understand.

Any suggestions? Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Back-button friendly ajax wizard navigation

Edward Zarecor-5
Since you are changing the DOM dynamically using Ajax, the browser --
correctly I would say -- isn't considering this a page change, so the
back button should take you back to the page prior to the wizard.

The browser history will be immutable from JavaScript, so that's not an option.

To achieve the user experience you want, I think the best alternative
is to validate your fields via Ajax onblur, but move between wizard
steps using a form submit.

Hope this helps.

Ed.

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Back-button friendly ajax wizard navigation

Brian Laframboise
Thanks Edward. I was hoping for some means of doing this in a
redirect-after-post kind of way so that the javascript response to the
client actually caused the browser to request the next wizard page via a new
url, creating a back-button history entry. I guess generating that URL for a
non-bookmarkable page during an ajax form submission and causing the client
to redirect is not doable.

In my particular case,  I have a wizard step with a single radio group and
no default option. Here I expect many users to simply click 'Next' and I was
hoping to save them the full page submission just to display the error
message. Unfortunately, here the "onblur" approach clearly won't work and I
can't think of another event handler onto which I could attach it.

However, it still sounds useful for my other form elements and I'll try it
out there.

Thanks again for the help.

On Wed, Apr 21, 2010 at 1:47 PM, Edward Zarecor <[hidden email]>wrote:

> Since you are changing the DOM dynamically using Ajax, the browser --
> correctly I would say -- isn't considering this a page change, so the
> back button should take you back to the page prior to the wizard.
>
> The browser history will be immutable from JavaScript, so that's not an
> option.
>
> To achieve the user experience you want, I think the best alternative
> is to validate your fields via Ajax onblur, but move between wizard
> steps using a form submit.
>
> Hope this helps.
>
> Ed.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Back-button friendly ajax wizard navigation

Martijn Dashorst
Administrator
use setResponsePage() to go to the next page when everything is a-ok.
Wicket will instruct the browser to redirect to the new page (iirc).

Martijn

On Wed, Apr 21, 2010 at 11:58 PM, Brian Laframboise
<[hidden email]> wrote:

> Thanks Edward. I was hoping for some means of doing this in a
> redirect-after-post kind of way so that the javascript response to the
> client actually caused the browser to request the next wizard page via a new
> url, creating a back-button history entry. I guess generating that URL for a
> non-bookmarkable page during an ajax form submission and causing the client
> to redirect is not doable.
>
> In my particular case,  I have a wizard step with a single radio group and
> no default option. Here I expect many users to simply click 'Next' and I was
> hoping to save them the full page submission just to display the error
> message. Unfortunately, here the "onblur" approach clearly won't work and I
> can't think of another event handler onto which I could attach it.
>
> However, it still sounds useful for my other form elements and I'll try it
> out there.
>
> Thanks again for the help.
>
> On Wed, Apr 21, 2010 at 1:47 PM, Edward Zarecor <[hidden email]>wrote:
>
>> Since you are changing the DOM dynamically using Ajax, the browser --
>> correctly I would say -- isn't considering this a page change, so the
>> back button should take you back to the page prior to the wizard.
>>
>> The browser history will be immutable from JavaScript, so that's not an
>> option.
>>
>> To achieve the user experience you want, I think the best alternative
>> is to validate your fields via Ajax onblur, but move between wizard
>> steps using a form submit.
>>
>> Hope this helps.
>>
>> Ed.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>



--
Become a Wicket expert, learn from the best: http://wicketinaction.com
Apache Wicket 1.4 increases type safety for web applications
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.4.4

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]