Combobox JSON source not loading

[san1646Participant]

My source is JSON with many fields, but I am using only 2 of them in the datafields. projectName and projectId.

var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'projectId' },
                        { name: 'projectNumber' }
                       // { name: 'city' },
                       // { name: 'state' }
                    ],
                    url: url,
                    async: false
                };
                 var dataAdapter = new $.jqx.dataAdapter(source);
                 // Create a jqxComboBox
                $("#jqxWidget_cb").jqxComboBox({ 
                    selectedIndex: 0, 
                    source: dataAdapter, 
                    displayMember: "projectNumber", 
                    valueMember: "projectId", 
                    width: '200px', 
                    height: '25px',
                    searchMode:'containsignorecase',
                    autoComplete:true
                });
                // trigger the select event.
                  $("#jqxWidget_cb").bind('select', function (event) {
                    if (item) {
                        var item = event.args.item;
                        console.log("combobox/item-"+item);  console.log(event);
                        if (event.args) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });  

My combobox does not load at all. I cannot even see the dropdown values. When I type, select event is fired, but the ‘item’ object is null.

Thank you

[NadezhdaParticipant]

Hello san1646,

Could you, please, provide us with a larger sample, including your JSON data? I would suggest you to use the latest version of jQWidgets (3.7.1).

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[san1646Participant]

Thanks!
I tried using 3.7.0.
I am just

Code here:

var data = dojo.toJson( this.projectVariable1.getData() ); //getting JSON from a variable
            var currentScope = this; //this.cssSummary.showing = true;
            console.log("(project/data)-"+data);
            
                //var url = $.parseJSON(data);
                var url = data;
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'projectId' },
                        { name: 'projectNumber' }
                    ],
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxComboBox
                $("#jqxWidget").jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: "projectNumber", valueMember: "projectId", width: 200, height: 25});
                // trigger the select event.
                $("#jqxWidget").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
            
			
<div id='jqxWidget'></div><div style=\"font-size: 12px; font-family: Verdana;\" id=\"selectionlog\"></div></div>

The data variable (from console)
[{"addressLine1":"Street 3","addressLine2":"House x","city":"City 1","contractAward":1390366800000,"country":"Funland","customerId":1,"departmentId":1,"enddate":1389243600000,"projectFolder":"1","projectId":1,"projectNumber":"SYS112233","proposaldue":1392786000000,"province":"1","ptsproposalNo":"1","startdate":1392786000000,"state":"AK","stateid":1,"statusId":1,"zipcode":51515},{"addressLine1":"street 5","addressLine2":"House y","city":"City 1","contractAward":1394082000000,"country":"Funland","customerId":2,"departmentId":1,"enddate":1395115200000,"projectFolder":"2","projectId":2,"projectNumber":"SYS223344","proposaldue":1392786000000,"province":"1","ptsproposalNo":"1","startdate":1392699600000,"state":"AK","stateid":1,"statusId":1,"zipcode":65188},{"addressLine1":"street 4","addressLine2":"House z","city":"City 1","contractAward":1392786000000,"country":"Funland","customerId":1,"departmentId":1,"enddate":1393304400000,"projectFolder":"3","projectId":3,"projectNumber":"SYS334455","proposaldue":1391835600000,"province":"1","ptsproposalNo":"1","startdate":1392699600000,"state":"AK","stateid":3,"statusId":1,"zipcode":41581},{"addressLine1":"8","addressLine2":"8","city":"8","contractAward":null,"country":"8","customerId":8,"departmentId":8,"enddate":null,"projectFolder":"","projectId":4,"projectNumber":"SYS445566","proposaldue":null,"province":"8","ptsproposalNo":"","startdate":null,"state":"8","stateid":0,"statusId":0,"zipcode":0},{"addressLine1":"some st","addressLine2":"some apt","city":"Somecity","contractAward":null,"country":"Tomorrowland","customerId":2,"departmentId":1,"enddate":1392872400000,"projectFolder":null,"projectId":5,"projectNumber":"SYS556677","proposaldue":null,"province":"1","ptsproposalNo":"1","startdate":1418187600000,"state":"MI","stateid":null,"statusId":1,"zipcode":90210}]

[NadezhdaParticipant]

Hi san1646,

Here is an example with your JSON data as localdata and works on our side.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data

            var data = [{ "addressLine1": "Street 3", "addressLine2": "House x", "city": "City 1", "contractAward": 1390366800000, "country": "Funland", "customerId": 1, "departmentId": 1, "enddate": 1389243600000, "projectFolder": "1", "projectId": 1, "projectNumber": "SYS112233", "proposaldue": 1392786000000, "province": "1", "ptsproposalNo": "1", "startdate": 1392786000000, "state": "AK", "stateid": 1, "statusId": 1, "zipcode": 51515 }, { "addressLine1": "street 5", "addressLine2": "House y", "city": "City 1", "contractAward": 1394082000000, "country": "Funland", "customerId": 2, "departmentId": 1, "enddate": 1395115200000, "projectFolder": "2", "projectId": 2, "projectNumber": "SYS223344", "proposaldue": 1392786000000, "province": "1", "ptsproposalNo": "1", "startdate": 1392699600000, "state": "AK", "stateid": 1, "statusId": 1, "zipcode": 65188 }, { "addressLine1": "street 4", "addressLine2": "House z", "city": "City 1", "contractAward": 1392786000000, "country": "Funland", "customerId": 1, "departmentId": 1, "enddate": 1393304400000, "projectFolder": "3", "projectId": 3, "projectNumber": "SYS334455", "proposaldue": 1391835600000, "province": "1", "ptsproposalNo": "1", "startdate": 1392699600000, "state": "AK", "stateid": 3, "statusId": 1, "zipcode": 41581 }, { "addressLine1": "8", "addressLine2": "8", "city": "8", "contractAward": null, "country": "8", "customerId": 8, "departmentId": 8, "enddate": null, "projectFolder": "", "projectId": 4, "projectNumber": "SYS445566", "proposaldue": null, "province": "8", "ptsproposalNo": "", "startdate": null, "state": "8", "stateid": 0, "statusId": 0, "zipcode": 0 }, { "addressLine1": "some st", "addressLine2": "some apt", "city": "Somecity", "contractAward": null, "country": "Tomorrowland", "customerId": 2, "departmentId": 1, "enddate": 1392872400000, "projectFolder": null, "projectId": 5, "projectNumber": "SYS556677", "proposaldue": null, "province": "1", "ptsproposalNo": "1", "startdate": 1418187600000, "state": "MI", "stateid": null, "statusId": 1, "zipcode": 90210 }];

            var source =
            {
                datatype: "json",
                datafields: [
                      { name: 'projectId' },
                      { name: 'projectNumber' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxcombobox").jqxComboBox({
                selectedIndex: 0,
                source: dataAdapter,
                displayMember: "projectNumber",
                valueMember: "projectId",
                width: 200,
                height: 25
            });

            $("#jqxcombobox").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);
                        $("#selectionlog").children().remove();
                        $("#selectionlog").append(labelelement);
                        $("#selectionlog").append(valueelement);
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxcombobox"></div>
        <div id="selectionlog"></div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts