Step 2 of 3: Initializing the Widget

In the previous step, you added markup to add the content that will appear in the datasource page. In this step, you'll add the jQuery script needed to initialize the application.

Complete the following step:

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijdatasource widget:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var superPanelRefreshed = false;
            var proxy = new wijhttpproxy({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: 'ab'
                },
                key: 'geonames'
            });
            var myReader = new wijarrayreader([{
                name: 'label',
                mapping: function (item) {
                    return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
                }
            }, {
                name: 'value',
                mapping: 'name'
            }, {
                name: 'selected',
                defaultValue: false
            }]);
            var list = $("#list");
            var input = $('#testinput');
            list.wijlist({
                selected: function (event, ui) {
                    var item = ui.item;
                    input.val(item.value);
                    list.wijlist('deactivate');
                }
            });
            datasource = new wijdatasource({
                reader: myReader,
                proxy: proxy,
                loading: function () {
                    input.addClass('wijmo-wijcombobox-loading');
                },
                loaded: function (data) {
                    list.wijlist('setItems', data.items);
                    list.wijlist('renderList');
                    list.wijlist('refreshSuperPanel');
                    input.removeClass('wijmo-wijcombobox-loading');
                }
            });
            datasource.load();
            input.bind("keydown.wijcombobox", function (event) {
                var keyCode = $.ui.keyCode;
                switch (event.keyCode) {
                    case keyCode.UP:
                        list.wijlist('previous', event);
                        // prevent moving cursor to beginning of text field in some browsers
                        event.preventDefault();
                        break;
                    case keyCode.DOWN:
                        if (!list.is(':visible')) {
                            list.show();
                            return;
                        }
                        list.wijlist('next', event);
                        // prevent moving cursor to end of text field in some browsers
                        event.preventDefault();
                        break;
                    case keyCode.ENTER:
                        event.preventDefault();
                        list.wijlist('select', event);
                        break;
                    case keyCode.PAGE_UP:
                        list.wijlist('previousPage');
                        break;
                    case keyCode.PAGE_DOWN:
                        list.wijlist('nextPage');
                        break;
                    default:
                        break;
                }
            });
        });
        function loadRemoteData() {
            datasource.proxy.options.data.name_startsWith = $('#testinput').val();
            datasource.load();
</script>

This script will initialize the list and button and use the wijdatasource to load remote data into the list.

You have created an application and added and initialized the wijdatasource widget. In the next step, in wijdatasource Step 3 of 3: Running the Project, you'll view the run-time interactions of the widget.