[solveQueriesMember]

Hi Peter,

Below is code I used to achieve chained ComboBox. I have used the jQuery GET method to read the xml & store the data in an variable. But here I am reading the XML twice, once through jQuery GET method & second through dataAdapterCountries.

<script type="text/javascript">
        $(document).ready(function () {
            var url = "CountryStateCity.xml";
            var all_data = null;
            
            $.get(url, function(data) { // get the countryStateCity.xml file
                    all_data = data; // save the data for future use
                }, 'xml'); // specify what format the request will return - XML
            var sourceCountries =
                {
                    datatype: "xml",
                    datafields: [
                      { name: 'countryId', type: 'int' },
                      { name: 'countryName', type: 'string' }
                    ],
                    root: "root",
                    record: "country",
                    url: url,
                    async: false
                };
            
            var dataAdapterCountries = new $.jqx.dataAdapter(sourceCountries, { async: false });
            
            // Create a COUNTRY jqxComboBox
            $("#jqxcombobox1").jqxComboBox({ source: dataAdapterCountries, displayMember: "countryName", valueMember: "countryId", placeHolder: "Select Country...", width: '200px', height: '25px', dropDownHeight: '200px' });
            
            $("#jqxcombobox2").jqxComboBox({ disabled: true, placeHolder: "Select State..." });
            $("#jqxcombobox3").jqxComboBox({ disabled: true, placeHolder: "Select City..." });
            $('#jqxcombobox1').bind('select', function (event) {
                var statesToDisplay = new Array();
                var selectedCountryId = event.args.item.value;
                i=0;
                $('country', all_data).filter(function() { // get all countries from xml
                    return selectedCountryId == $(this).find("countryId").text();
                }).find('state').each(function() {
                    var row = {};
                    row['stateName'] = $(this).find("stateName").text();
                    row['stateId'] = $(this).find("stateId").text();
                    statesToDisplay[i] = row;
                    i++;
                });
                var stateSource = {
                    datatype: "array",
                    datafields: [
                                 { name: 'stateName', type: 'string'},
                                 { name: 'stateId', type: 'int'}
                             ],
                    localdata: statesToDisplay
                };
                var dataAdapterStates = new jQuery.jqx.dataAdapter(stateSource, { async: false });
                $("#jqxcombobox2").jqxComboBox({ source: dataAdapterStates, width: '200px', displayMember: "stateName", valueMember: "stateId", placeHolder: "Select State...", height: '25px', disabled: false });
            });
            $('#jqxcombobox2').bind('select', function (event) {
                var citiesToDisplay = new Array();
                var selectedStateId = event.args.item.value;
                i=0;
                
                $('state', all_data).filter(function() { // get all states from xml
                    return selectedStateId == $(this).find("stateId").text();
                }).find('city').each(function() {
                    var row = {};
                    row['cityName'] = $(this).find("cityName").text();
                    row['cityId'] = $(this).find("cityId").text();
                    citiesToDisplay[i] = row;
                    i++;
                });
                var citySource = {
                    datatype: "array",
                    datafields: [
                                 { name: 'cityName', type: 'string'},
                                 { name: 'cityId', type: 'int'}
                             ],
                    localdata: citiesToDisplay
                };
                var dataAdapterCities = new jQuery.jqx.dataAdapter(citySource, { async: false });
                $("#jqxcombobox3").jqxComboBox({ source: dataAdapterCities, width: '200px', displayMember: "cityName", valueMember: "cityId", placeHolder: "Select City...", height: '25px', disabled: false });
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div style="float: left;" id='jqxcombobox1'>
        </div>
        <div style="float: left;" id="jqxcombobox2">
        </div>
        <div style="float: left;" id="jqxcombobox3">
        </div>
    </div>
</body>
</html>

Is there a more efficient way to read that XML only once & do all the processing thereafter, since the size of the XML being used by me is 4.5 MB which is too large to read twice?

[solveQueriesMember]

Hi Peter,

Ok. Trying out downloadComplete callback way. Will inform when its done

[solveQueriesMember]

Hi Peter,

I agree with your point, but as I said in my first post I want a chained ComboBox and I guess the only way to do this is by above method. So could you help me generate a chained combo-box.

Thanks!

[solveQueriesMember]

Hi Peter,

After pointing to the “state” records, I am not able to get the element to compare the selected countryId with the XML so that I could display the proper states within a country.

Below is the code snippet used on the above XML:

    <script type="text/javascript">
        $(document).ready(function () {
            
            var url = "CountryStateCity.xml";
            
            var sourceCountries =
                {
                    datatype: "xml",
                    datafields: [
                      { name: 'countryId', type: 'int' },
                      { name: 'countryName', type: 'string' } ,
                      { name: 'stateId', map: 'state>stateId', type: 'int' },
                      { name: 'stateName', map: 'state>stateName', type: 'string' }
                    ],
                    root: "root",
                    record: "country",
                    url: url,
                    async: false
                };
            var sourceStates =
                {
                    datatype: "xml",
                    datafields: [
                      { name: 'countryId', type: 'int' },
                      { name: 'countryName', type: 'string' } ,
                      { name: 'stateId', map: 'state>stateId', type: 'int' },
                      { name: 'stateName', map: 'state>stateName', type: 'string' },
                      { name: 'cityId', map: 'state>city>cityId', type: 'int' },
                      { name: 'cityName', map: 'state>city>cityName', type: 'string' }   
                    ],
                    root: "root",
                    record: "country>state",
                    url: url,
                    async: false
                };
            var dataAdapterCountries = new $.jqx.dataAdapter(sourceCountries, { async: false });
            // states to display
            var statesToDisplay = new Array(); 
            // Create a jqxComboBox
            $("#jqxcombobox1").jqxComboBox({ source: dataAdapterCountries, displayMember: "countryName", valueMember: "countryId", placeHolder: "Select Country...", width: '200px', height: '25px', dropDownHeight: '200px' });
            
            $('#jqxcombobox1').bind('select', function (event) {
                
                var selectedCountryId = event.args.item.value;
                var dataAdapterStates = new $.jqx.dataAdapter(sourceStates, {
                    autoBind: true,
                    beforeLoadComplete: function (records) {
                        var data = new Array();
                        for (var i = 0; i < records.length; i++) {
                            var countryRecord = records[i];
                            if(countryRecord.countryId == selectedCountryId)
                            {
                                countryRecord.StateIDToDisplay = countryRecord.stateId;
                                countryRecord.StateNameToDisplay = countryRecord.stateName;
                                data.push(countryRecord);
                            }
                        }
                        return data;
                    }
                });
                $("#jqxcombobox2").jqxComboBox({ source: dataAdapterStates, width: '200px', displayMember: "StateNameToDisplay", valueMember: "StateIDToDisplay", placeHolder: "Select State...",height: '25px', disabled: false });
            });
        });   
    </script>
</head>
<body>
    <div id='content'>
        <div style="float: left;" id='jqxcombobox1'>
        </div>
        <div style="float: left;" id="jqxcombobox2">
        </div>
        <div style="float: left;" id="jqxcombobox3">
        </div>
    </div>
</body>
</html>

On this line

if(countryRecord.countryId == selectedCountryId)

I am not able to get the countryId from dataAdapterStates.

Need some help to display the states contained in a particular country.

[Author]

Posts