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 filteringselect s 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 filteringselect s 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.