Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Basic Buttons

Output: ____ // Event Type: ____

HTML

<button type="button" data-fd-control="button"
    data-fd-callback="setOutputText"
    data-fd-parentid="1"
    data-fd-value="optional"
    class="btn btn-primary">Button #1</button>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text("Button Clicked: #" + data.parentid);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Loading Spinner (Manual)

HTML

<button type="button" data-fd-control="button"
    data-fd-callback="loadingSimulation"
    data-fd-parentid="1"
    class="btn btn-primary">Submit</button>
<button type="button" data-fd-control="button"
    data-fd-callback="loadingSimulation"
    data-fd-parentid="1" disabled
    class="btn btn-primary">Disabled</button>

JavaScript

FD.Page.loadingSimulation = function () {
    this.startLoading();
    setTimeout(() => this.stopLoading(), 3000);
};

Loading Spinner (with Ajax call)

HTML

<button type="button" data-fd-control="button"
    data-fd-callback="loadingSimulation"
    data-fd-parentid="1"
    class="btn btn-primary">Button #1</button>

JavaScript

FD.Page.ajaxSimulation = function () {
    $.fdAjax({
        url: "/Framework/Button/LoadingSimulation",
        loadingButton: this.element
    });
};