jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ComboBox › Combobox from json

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Combobox from json Posts
  • May 21, 2012 at 1:07 pm Combobox from json #4268

    meubanks
    Member

    I’m trying to populate a combo box from json. The combo box is there but it is empty.


    var theme = 'classic';

    var trackSource = {
    datatype: "json",
    datafields: [
    { name: 'id'},
    { name: 'country'},
    { name: 'name'}
    ],
    id: 'id',
    url: '/data/tracks'
    };

    var trackDataAdapter = new $.jqx.dataAdapter(trackSource);

    $("#trackscombobox").jqxComboBox({
    width: 200,
    height: 25,
    theme: theme,
    selectedIndex: 0,
    source: trackDataAdapter,
    displayMember: 'name',
    valueMember: 'id'
    });

    $('#trackscombobox').bind('select', function (event) {
    var args = event.args;
    var item = $('#trackscombobox').jqxComboBox('getItem', args.index);
    alert('Selected: ' + item.label);
    });

    Source

    [{
    "name": "(AGUA) CALIENTE",
    "id": "AC ",
    "country": "USA"
    }, {
    "name": "(PHOE) SPORTSMANS PARK",
    "id": "PSP",
    "country": "USA"
    }, {
    "name": "505 FARM TRAINING CENTER",
    "id": "FOF",
    "country": "USA"
    }, {
    "name": "ABE LINCOLN DOWNS",
    "id": "ABE",
    "country": "USA"
    }, {
    "name": "ABRACADABRA FARM",
    "id": "ABC",
    "country": "USA"
    }, {
    "name": "ADAMS COUNTY FAIRGROUNDS",
    "id": "ADC",
    "country": "USA"
    }, {
    "name": "ADENA SPRINGS FARM",
    "id": "ADS",
    "country": "USA"
    }, {
    "name": "YORKTON EXH. ASSOC.",
    "id": "YKT",
    "country": "CAN"
    }, {
    "name": "YUMA COUNTY FAIR",
    "id": "YMA",
    "country": "USA"
    }, {
    "name": "ZIA PARK",
    "id": "ZIA",
    "country": "USA"
    }]

    May 21, 2012 at 1:31 pm Combobox from json #4269

    Peter Stoev
    Keymaster

    Hi meubanks,

    I suggest you to double-check whether the ‘url’ to your data source is correct.

    Here’s a working code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.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>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
             
                    var trackSource = {
                        datatype: "json",
                        datafields: [
                        { name: 'id' },
                        { name: 'country' },
                        { name: 'name' }
                        ],
                        id: 'id',
                        url: 'sample.json'
                    };
                    var trackDataAdapter = new $.jqx.dataAdapter(trackSource);
                    $("#trackscombobox").jqxComboBox({
                        width: 200,
                        height: 25,
                        selectedIndex: 0,
                        source: trackDataAdapter,
                        displayMember: 'name',
                        valueMember: 'id'
                    });
                });
            </script>
            <div id='trackscombobox'>
            </div>
        </div>
    </body>
    </html>

    The contents of the sample.json file:

    [{ "name": "(AGUA) CALIENTE","id": "AC ","country": "USA" }, {"name": "(PHOE) SPORTSMANS PARK","id": "PSP","country": "USA"}]

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.