{{ select }}

<script>

    // This code expects usage of columns_widget.html and filter_widget.html in the same form.

    // When page is shown, is needed to fill data, not just after any change.
    window.addEventListener('load', cmsQeTableTableChanged);
    document.querySelector('#{{ id }}').addEventListener('change', cmsQeTableTableChanged);

    function cmsQeTableTableChanged() {
        var table = document.querySelector('#{{ id }}').value;
        var sameTable = table === '{{ value }}';
        cmsQeTableResetColumns();
        cmsQeTableResetFilter();
        cmsQeTableGetJSON('{{ url }}?table=' + table, function (err, data) {
            if (err != null) {
                alert('Something went wrong: ' + err);
                return;
            }
            cmsQeTableSetColumns(sameTable, data.columns);
            cmsQeTableSetFilter(sameTable, data.columns);
        });
    }

    function cmsQeTableGetJSON(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'json';
        xhr.onload = function () {
            var status = xhr.status;
            if (status == 200)
                callback(null, xhr.response);
            else
                callback(status);
        };
        xhr.send();
    }

</script>
