Window Popup Editor

Custom popup window to edit/create data

by Alexey Sharifullin

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div style="visibility: hidden;" id="jqxWidget">
    <input type="button" value="Show" id="showWindowButton" />
    <div id="eventWindow">
        <div>Modal Window</div>
        <div>
            <div id="content">Please click "OK", "Cancel" or the close button to close the modal window. The dialog result will be displayed in the events log.</div>
            <div>
                <div style="float: right; margin-top: 15px;">
                    <input type="button" id="ok" value="OK" style="margin-right: 10px" />
                    <input type="button" id="cancel" value="Cancel" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.as-form-label {
    padding: 0 5px 0 0;
    float: left;
}
.as-form-dropdown-label {
    float: left;
}
.as-form-add-field {
    cursor: pointer;
}
.as-form-row {
    display: block;
}
.as-form-textarea {
    height: 50px;
}

JavaScript

String.prototype.addSlashes = function () {
    return this.replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
}

var response = {};

function init(f) {
    var inputInit = {};
    if (f.width !== null) {
        $.extend(inputInit, {
            width: f.width
        });
    }
    if (f.height !== null) {
        $.extend(inputInit, {
            height: f.height
        });
    }
    return inputInit;
}

function createLable(f, row) {
    if (f.label != null) {
        var label = $('<span/>', {
            class: 'as-form-label',
            html: f.label
        });
        row.append(label);
    } else if (f.dropDownLabel != null && f.dataCategory != null) {
        var label = $('<div/>', {
            class: 'as-form-dropdown-label as-form-label'
        });
        row.append(label);

        label.jqxDropDownList({
            source: f.dropDownLabel,
            selectedIndex: 1,
            width: '200',
            height: '20'
        });
        label.on('select', function (event) {
            var args = event.args;
            if (args) {
                // index represents the item's index.                
                var index = args.index;
                var item = args.item;
                // get item's label and value.
                f.dataCategory = item.value;
                $(this).data("dataCategory", item.value);
            }
        });

    }
}

function addRow(row, widget, rowBeforeId, content, changeEvent) {
    if (widget !== null) row.append(widget);
    if (rowBeforeId != null) $('#' + rowBeforeId).before(row);
    else content.append(row);
    if (widget != null) {
        $('#' + widget.attr('id')).on(changeEvent, function () {
            $(this).data("changed", 1);
        });
    }
}

function createJqxInput(f, inputInit) {
    var txt = $('<input/>', {
        name: f.name,
        class: 'as-form-input',
        value: (f.value != null) ? f.value : ""
    }).data("changed", 0);
    txt.jqxInput(inputInit);
   ...