How can I make two DOJO QueryReadStores depend on eachothers data?

[rythmic]

Hi!

Background info

What I have is the classic zip code - city relation.
They are fed into two QueryReadStores. Each Store back an individual filteringselect box.

The datastores are fed from a Spring Controller with one method for each store. Each method returns json data containing either zip codes or city names.

Each time a filteringselect box recieves an input, the method in the spring controller attached to the backing store is run and returns the options available depending on the input in the filteringselect.

The JSON structure is really simple for both stores it looks like this:

{label:zip,
items:[ {zip: 12345},{zip:12346}, ... ] }
 
{label:city,
items:[ {city: NEW YORK},{city:CHICAGO}, ... ] }
 
 
 

In the backend a zipcode is mapped to a city.

I have the individual filteringselects working perfectly through this code:

 
<label for="postnr">Zip:</label>
<input id="postnr">
 
<label for="postort">City:</label>
<input id="postort">
 
<script type="text/javascript" src="dojo/dojo.js"
        djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.data.QueryReadStore");
 
    dojo.addOnLoad(function() {
 
 var postnrstore = new dojox.data.QueryReadStore({url: "postnr.json"});
        postnrstore.fetch({serverQuery:{name:''}, queryOptions:{ignoreCase:true}});
 
        new dijit.form.FilteringSelect({
            store: postnrstore,
            searchAttr: "zip",
            style: "width: 100px;",
            id: "postnr",
            },"postnr");
 
        var postortstore = new dojox.data.QueryReadStore({url: "postort.json"});
        postortstore.fetch({serverQuery:{name:''}, queryOptions:{ignoreCase:true}});
 
        new dijit.form.FilteringSelect({
            store: postortstore,
            searchAttr: "city",
            style: "width: 200px;",
            id: "postort",
            },"postort");
    });
 
</script>
 

Problem
How do I go about linking the two filteringselects so that they affect the other store depending on its own input.

That is if I have typed zip: 123 and the mapped cities for a zip starting with 123 are Chicago, New York and Washington DC. How do I get the city filteringselect to only display those three options?

And also the other way around, how do I display the zipcodes available for Washington DC if that is my input in the city filteringselect


Should I expand the structure of the JSON code to include the relations, or can it be done with the current structure?

best regards
rythmic

[acoder]

I've not really worked with Dojo, so I wouldn't know if there's a built-in or a more efficient method (save checking the docs), but can you not pass something to the script that returns the filtered options to update it when a change is made in either the zip code or the city.