ansaurus

Question

Using dijit.filteringselect in a Spring MVC environment

Answer 1

+1 A:

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>

Abboq 2010-02-11 15:36:43

Answer 2

A:

Thank you Abboq.

Unfortunately I got delayed about a month because there were other prioritizations in the project, but now I'm back at this.

I tried your example and it works excellently. Now to figure out how to load the data dynamically.

There is one other issue as well. Loading the datastore on pageload is not an option for me as the datastores would then hold close to 10 000 values.

I need to start with empty or maybe just a partial list and then fill the datastore as the first character is entered.

Kalle 2010-03-16 07:26:55

ansaurus

tags:

views:

answers:

Using dijit.filteringselect in a Spring MVC environment

related questions