Overview

EzyPlatform provides pre-built source code for confirm popups (using Bootstrap) for both admin and web interfaces. You will need to import the popup source code into your templates and include the necessary JavaScript to execute after the user confirms.

For Admin

For example, if you have a feature to delete a class with a button like this:

<button class="btn btn-danger mb-2"
        th:attr="onclick=|elearning.onDeleteClassClick(${eclass.id})|">
    [[#{delete}]] <i class="fas fa-trash"></i>
</button>

You will need to import a confirm popup like this:

<th:block layout:fragment="modals">
    <th:block th:replace="~{fragments/prompt :: content(id='delete-class-modal', title=#{confirm}, body=${'body'}, confirmButton=#{delete}, closeButton=#{close})}" />
</th:block>

And the JavaScript code like this:

<script layout:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.messages.do_you_want_to_delete_class_pid = /*[[#{do_you_want_to_delete_class_pid}]]*/;
/*]]>*/

// ==================== delete a class ============
elearning.onDeleteClassClick = function(classId) {
    elearning.selectedClassId = classId;
    $('#delete-class-modal-body-content')
        .text(
            ezyadmin
                .messages
                .do_you_want_to_delete_class_pid
                .replace('{0}', elearning.selectedClassId)
        );
    $('#delete-class-modal').modal('show');
}

elearning.onPromptConfirmed = function(modalId) {
    if (modalId == 'delete-class-modal') {
        elearning.deleteEClass();
    }
}

ezyadmin.deleteEClass = function() {
    $.ajax({
        type: 'DELETE',
        url: '/elearning/api/v1/classes/' + elearning.selectedClassId,
        success: function (data) {
            window.location = '/elearning/classes'
                + (ezyadmin.lang ? '?lang=' + ezyadmin.lang : '');
        },
        error: function (e) {
            ezyadmin.processGetApiErrors(e);
        }
    });
}

When the user clicks the button, the onDeleteClassClick function is called. It sets the content for the popup and displays it. When the user confirms, the deleteEClass function is called.

For Web

For example, if you have a feature to delete a project with a button like this:

<button class="btn btn-solid btn-danger d-md-inline-block d-none btn-project-action"
        data-bs-toggle="modal" data-bs-target="#delete-project-modal">
    [[#{delete}]]
</button>

You will need to import a confirm popup like this:

<th:block layout:fragment="modals">
    <th:block th:replace="~{ezycommon/prompt :: content(id='delete-project-modal', title=#{confirm}, body=${#messages.msg('do_you_want_to_delete_project_pname', project.displayName)}, confirmButton=#{delete}, closeButton=#{close})}" />
</th:block>

And the JavaScript code like this:

var onPromptConfirmed = function(modalId) {
    if (modalId == 'delete-project-modal') {
        deleteProject();
    } else {
        actProjectVersion(modalId);
    }
}

var deleteProject = function() {
    $.ajax({
        type: 'DELETE',
        url: '/api/v1/projects/' + projectId,
        success: function (data) {
            window.location = '/account/projects';
        },
        error: function (data, e) {
            ezyweb.processUpdateApiErrors({}, data);
        }
    });
}

When the user clicks the button, the popup is displayed. When the user confirms, the deleteProject function is called.

Confirmation popup usage

Overview

For Admin

For Web