I have implemented a solution to this, and I thought it polite to provide an
update...
In order to work with Non-JS browsers, disabling the dropdowns until the JS
was loaded (Option one) was not a good enough solution. The same for Option
Two; the whole province list cannot be loaded after the page has rendered in
a non-JS browser; I have to load all of the provinces in the province
dropdown from the start.
In the cities dropdown in the form I load in the list of cities of the
selected province. I also save the province that page loaded with as a JS
variable.
After the page's form loads (and renders) the page loads and attaches the
event handler for the pull-down of the province, which will re-populate the
city list with the cities in the newly chosen province.
After the cityArray and the event handler script is loaded and attached to
the province pulldown, I check to see if the province in the pull-down does
not equal to the initial page state in the JS variable. If they are not
equal then I invoke the province pulldown's event handler, which loads in
the new city list for the new province chosen, which is defaulted to "select
a city."
If the page is saved before the event handler is loaded such that the city
does not exist in the chosen province, I discard the value of the city and
save only the chosen province. The client has chosen not to stop and throw
an error, but instead let the user "get on with things". I could have
stopped and reloaded the form, explained the error, and given the user a
chance to choose a correct city in their province.
I was able to use a program called "sloppy" to simulate a slow speed
connection, and I was able to test this behaviour, and I was able to test
various scenarios of a partially loaded page.
Oh, and I made one other change: The list of cities had been pulled in as
pre-loaded options: ie: ...citiesArray['ON'][15] = new
Option('Toronto','Toronto',false,false);...
I now only pull in an array of cities:citiesArray['ON'] =
['Burlington',Bradford','Brantford','Toronto',...];
This loads faster (80% smaller file!!), but has slower JS performance as I
have to create the Options objects in the loop based on the cities in
the citiesArray; a trade off that we're willing to make.
And, this strategy will still work when the page is changed to fetch the
city list using AJAX. ;-)
On 11/10/09, Anthony Humphreys <[email protected]> wrote:
>
> Hi all,
>
> We had a problem where people were putting in inaccurate information for
> the "city."
> We solved that problem by using some javascript and limiting the choice of
> cities by using a pull-down. The list of cities is limited by the choice of
> province.
>
> This introduced a new problem, the page took a very long time to load as
> the sript and array of cities was being loaded by the browser.
> We solved this by moving the JS script and the JS city array (city list)
> into an external JS file which is loaded after the form is pushed to the
> browser. Now the form sppears to load very quickly, as the script/array
> loads after the browser has already rendered the form.
>
> However, this introduces a new problem: the form can changed by the
> user before all the scripts/arrays have loaded.
>
> I seem to have a few options avaialable to me to solve this, but I was
> wondering how you have solved this dilemma.
>
> Option One: Disable the province/city pulldowns until the all the
> scripts/arrays load.
> Option two: Only populate the province pulldown with the current province;
> load the rest of the provinces with the whole province list only when all
> the scripts/arrays are loaded
> Option three: Save the initial state of the pulldowns; once all of the
> script/arrays are loaded compare the intial state against the current state
> of the form and make the appropriate updates.
> Other options: Other strategies you have used but that I've not listed.
>
> Thanks!
>
> Anthony -
>
>
>
> ________________________________________________________________________
> TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf
>
>
________________________________________________________________________
TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf
