JQuery Cycle Plugin needs to cycle to next slide on post back if validation group not valid

Question

I'm using the JQuery Cycle plugin (with attributes defined in a separate site wide custom js file) to cycle between two pages (separated by tables) of a form. Each page has its own validation group for the controls on that page. The first page has a "Next" button that when clicked manually fires page validation for the first validation group. If it fails the tool tips are displayed for the user to correct the information. If validation succeeds, the cycle next command is called.

$('#request-information').cycle('next');

On the second page, the controls are grouped in a second validation group with the submit button. When the submit button is clicked, server side validation is triggered and if it fails the page reloads on postback. All of this works, except if the second page fails I want the form to stay on the second page. So if the web page is reloaded because the second page of the form failed to validate I need to either set the starting slide to the second page of the form or if that's not possible at least trigger the cycle next command.

It doesn't seem like I can just set the startingslide to the second page of the form because that will overwrite the other defined attributes of the cycle function that are set in the separate js file.

So does anyone know how to advance to the second slide on postback page load based on whether the second validation group failed when the submit button was clicked? Or should I be doing something different using viewstate or something?

Sorry this is a long winded question. Hope its clear and not confusing. Thank you

Answer 1

If you know that you need to go to the second slide when your page loads then you could do something like this:

var init = { startingSlide: 1 }; // i.e. second slide, the indices are zero-based
$('whatever').cycle($.extend(init, the_name_of_your_global_default_options));

You'd just have to arrange for init to be an empty object literal except when you needed to set startingSlide. If .cycle() is being somewhere outside your page, then you could reserve a variable for page-specific options and $.extend() that where .cycle() is called. For example, in your page, you could do something like this:

app_name_space.page_cycle_opts = { startingSlide: 1 };

and then way off in the JavaScript file that is binding the cycle stuff:

app_name_space.page_cycle_opts = app_name_space.page_cycle_opts || { };
$('whatever').cycle($.extend(app_name_space.page_cycle_opts, default_options));

I'm using app_name_space as a placeholder for whatever global namespace your application is already using to avoid name conflicts. If you had to deal with multiple cycle instances on a single page then you'd want to index page_cycle_opts by element ID, for example:

app_name_space.page_cycle_opts['X'] = { startingSlide: 1 };

and then way off elsewhere:

$('whatever').each(function() {
    $(this).cycle($.extend(
        app_name_space.page_cycle_opts[this.id] || { },
        default_options
    ));
});

The basic idea is to consider the global configuration options as a set of defaults and then allow page-specific overrides through a well defined and documented mechanism.

A long winded answer to a long winded question. Hope its clear and not confusing.