Question

Background
I have two select form fields chained together: duration and frequency. When the user selects a frequency, the duration options are dynamically inserted. There are default options, but those are just so that the field isn’t empty when the user expands it.

For example, the frequency options are “day”, “other day”, and “week”. If I select “day”, the frequency options change to “5 days”, “15 days”, and “30 days”.

Problem
The problem comes when the user submits the form with errors, the form is returned with all the form fields re-populated and the errors highlighted — except for the Frequency select field — whose options are dynamically generated. It is not highlighted and it’s options are the default options.

Is there a way that I can have these options re-populated if the user submits with an error. We are doing quite a bit of JavaScript validation, so this situation shouldn’t happen that often, but would like to make getting an error as painless an experience as possible for the users.

Code
I’m using jquery and a jquery plugin called cascade to chain the two fields together.
(http://plugins.jquery.com/project/cascade)

Here’s my custom JavaScript.

This script generates the list of options:

var list1 = [
    {'When':'86400','Value':' ','Text':' '},
    {'When':'172800','Value':' ','Text':' '},
    {'When':'604800','Value':' ','Text':' '},
    {'When':'86400','Value':'432000','Text':'5 days'},
    {'When':'86400','Value':'1296000','Text':'15 days'},
    {'When':'86400','Value':'2505600','Text':'30 days'},
    {'When':'172800','Value':'1296000','Text':'15 days'},
    {'When':'172800','Value':'2505600','Text':'30 days'},
    {'When':'172800','Value':'3888000','Text':'45 days'},
    {'When':'604800','Value':'2505600','Text':'4 weeks'},
    {'When':'604800','Value':'3715200','Text':'6 weeks'},
    {'When':'604800','Value':'4924800','Text':'8 weeks'}
];

function commonTemplate(item) {
    return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
};

function commonMatch(selectedValue) {
    return this.When == selectedValue; 
};

And this is the script that triggers the generation of the select options:

jQuery("#duration).cascade("#frequency",{
    list: list1,            
    template: commonTemplate,
    match: commonMatch          
})

The Question
Any thoughts on how to get the dynamically generated frequency options to re-populate when the form is returned to the browser with errors? Could either use the cascade plugin I’m currently using or some other method?

Help is muchly appreciated. 🙂

Answer 1

I am not familiar with this plugin, but couldn’t you just fire the change() event of #duration and/or #frequency on document.ready?

$(document).ready(function() {
    $('#duration').change();
    $('#frequency').change();
});

I am pretty sure all the script is doing is binding stuff to the change event of the select (by default, at least) so that should trigger the plugin to work its magic…