Using dijit.filteringselect in a Spring MVC environment_问答_开发者

I am trying to code two filteringselects which should both change according to data entered into any of the forms.

So data entered into fs1 should trigger changes in fs2. Data entered into fs2 should trigger changes in fs1.

I am in a spring environment which in my case means that the dojo code is in a jsp file and the filtering select fields are populated through a Controller class on the server side using @ModelAttribute annotations to make the data available as a variable in the jsp file.

I have the relation data on the Java side so it's available through the controller.

Here is what confuses me at the moment.

I am new to DOJO and the documentation on the DOJO support site is a little hard to grasp for me. I would like to see a conceptu开发者_C百科al list of what is needed to accopmplish and connect the separate stores of my filteringselects.
When there is a change in one of the filteringselects, how do I inform the controllerclass of the changes and send the data that remains in the filteringselect?

This question could also be read as: how can I call a method with input parameters that hold the data available in the edited filteringselect?

I suggest we work on this in two incremental parts:

Get the first FilteringSelect's onChange event working
Wire them up to use server data stores

The following code sample takes a Dojo Campus' codependent FilteringSelect example and simplifies it so that its data stores are local. It shows how to programmatically instantiate two FilteringSelects with the second being dependent on the first by an onChange event handler.

Can you please try running it and let me know if you get it working?

Once we get your first FilteringSelect triggering filtering on the second, I will edit to add an explanation on how to convert them to use server side data stores.

<html>
<head>
<title>Test File</title>
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">

<label for="state">State:</label>
<input id="state">

<label for="city">City:</label>
<input id="city">

<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.addOnLoad(function() {
        var cityJson = {
            label: 'name',
            items: [{ name: 'Albany', state: 'NY' },
                    { name: 'New York City', state: 'NY' },
                    { name: 'Buffalo', state: 'NY' },
                    { name: 'Austin', state: 'TX' },
                    { name: 'Houston', state: 'TX' }]
            };
        var stateJson = {
            identifier: 'abbreviation',
            label: 'name',
            items: [ { name: 'New York', abbreviation: 'NY' },
                     { name: 'Texas', abbreviation: 'TX' } ]
            };

        new dijit.form.ComboBox({
            store: new dojo.data.ItemFileReadStore({
                data: cityJson
            }),
            autoComplete: true,
            query: {
                state: "*"
            },
            style: "width: 150px;",
            required: true,
            id: "city",
            onChange: function(city) {
                dijit.byId('state').attr('value', (dijit.byId('city').item || {
                    state: ''
                }).state);
            }
        },
        "city");

        new dijit.form.FilteringSelect({
            store: new dojo.data.ItemFileReadStore({
                data: stateJson
            }),
            autoComplete: true,
            style: "width: 150px;",
            id: "state",
            onChange: function(state) {
                dijit.byId('city').query.state = state || "*";
            }
        },
        "state");
    });
</script>

</body>
</html>

in the namespace of the jsp:

xmlns:springform="http://www.springframework.org/tags/form"

sample form:

<springform:form action="#" >
    <label for="country">Country:</label>
    <springform:select id="country" path="country" items="${countryList}" itemLabel="country" itemValue="id"/>
    <div id="citySelectDiv"></div>
</springform:form>

javascript code:

<script type="text/javascript">
            <![CDATA[
                dojo.require("dojo.parser");
                dojo.require("dojo.data.ItemFileReadStore");

                function countryChanged(dataFromServer){
                    //convert json to dojo filteringSelect options
                    var options = {
                            identifier: 'id',
                            label: 'city',
                            items: dataFromServer
                        };
                    var cityStore =new dojo.data.ItemFileReadStore({data : options});                                   
                    // create Select widget, populating its options from the store
                    if (!dijit.byId("citySelectDiv")) {
                        //create city selction combo
                        new dijit.form.FilteringSelect({
                            name: "citySelectDiv",
                            store: cityStore,
                            searchAttr : "city",
                        }, "citySelectDiv");    
                    }else{
                        //if already created the combo before
                        dijit.byId('citySelectDiv').set('value',null);
                        dijit.byId('citySelectDiv').store = cityStore;
                    }   
                }



                Spring.addDecoration(new Spring.ElementDecoration({
                  elementId : "country",
                  widgetType : "dijit.form.FilteringSelect",
                  widgetAttrs : {
                      promptMessage: "Select a Country", 
                      required : true,
                      onChange : function(){                              
                        var xhrArgs = {
                            url: "ajax/country/" +dijit.byId('country').get('value'),
                            handleAs: 'json',
                            load: function(dataFromServer) {
                                countryChanged(dataFromServer);
                            }                               
                        }; 
                        //make the ajax call
                        dojo.xhrGet(xhrArgs);

                      }                        
                  }
                }));

Sample Controller method:

@ResponseBody
    @RequestMapping("/ajax/country/{country}")
    public List<City> clientSelection(@PathVariable("country") String country ) {
        log.info("Country = {} ",country);      
        return cityService.findCitiesByCountry(country);
    }