@manhnguyenv

Welcome to my blog!

Bootstrap Confirm

March 19, 2018 13:49

Confirm Bootstrap - Bootstrap Confirm

Tham khảo thêm

https://craftpip.github.io/jquery-confirm/

Layout

..\Scripts\confirm-bootstrap.js

..\Views\Admin\_LayoutBackEnd.cshtml

<script src="~/Scripts/confirm-bootstrap.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

View

@{

    var confirmMessage = ViewBag.MessageDeleteConfirm;

}

<form id="confirmForm" action="#" method="post" class="form-inline">

    <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

            <button id="ShowConfirmButton" type="button" class="btn btn-default btn-primary" data-id="1">Show Confirm</button>

        </div>

    </div>

</form>

<form id="searchForm" action="#" method="post" class="form-inline">

    <div class="form-group">

        <label for="email"></label>

        <input type="email" class="form-control" id="email">

    </div>

    <button type="submit" class="btn btn-default">Search</button>

</form>

<script>

    $(function () {

        $('#ShowConfirmButton').confirmModal({

            confirmTitle: 'Warning!',

            confirmMessage: '@confirmMessage',

            confirmOk: 'Yes',

            confirmCancel: 'No',

            confirmDirection: 'rtl',

            confirmStyle: 'primary',

            confirmCallback: function (confirmLink) {

                var id = $(confirmLink).attr('data-id');

                $.ajax({

                    url: "@Url.Action("TestSubmit")",

                    type: "POST",

                    dataType: "json",

                    cache: false,

                    data: { id: id }

                }).done(function (data) {

                    if (data.status === "error") {

                        $('#status').html(data.message);

                    }

                    else if (data.status === "success") {

                        $('#message').val(data.message);

                        //$("#searchForm").submit();

                    }

                });

            }

        });

    });

</script>

Controller

        //  /Admin/Test

        [IsRestricted]

        public ActionResult Test()

        {

            ViewBag.MessageDeleteConfirm = "Bạn có chắc chắn muốn thực hiện hành động này?";

            return View();

        }

 

        //  /Admin/Test

        [HttpPost]

        public ActionResult TestSubmit(int id)

        {

            var data = new { status = "success", data = id };

            //var data = new { status = "error", data = id };

            return Json(data, JsonRequestBehavior.AllowGet);

        }

File: confirm-bootstrap.js

(function ($) {
$.fn.confirmModal = function (opts) {
var body = $('body');
var defaultOptions = {
confirmTitle: 'Please confirm',
confirmMessage: 'Are you sure you want to perform this action ?',
confirmOk: 'Yes',
confirmCancel: 'Cancel',
confirmDirection: 'rtl',
confirmStyle: 'primary',
confirmCallback: defaultCallback,
confirmCancelCallback: defaultCancelCallback,
cssClass: '',
hiddenCancel: false
};
var options = $.extend(defaultOptions, opts);
var time = Date.now();

var headModalTemplate =
'<div class="confirm-modal #CssClass# modal fade" id="#modalId#" tabindex="-1" role="dialog" aria-labelledby="#AriaLabel#" aria-hidden="true" data-backdrop="static">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="line-panel bg-cyan row" style="background: #00afd8; color: white; padding: 3px 10px; cursor: move;">' +
'<div class="pull-left modal-title" style="">#Heading#</div>' +
'<div class="pull-right">' +
'<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" style="margin: 0">x</button>' +
'</div>' +
'</div>' +
'<div class="modal-body">' +
'<div class="content-box validation-summary-errors">' +
'<h4>#Body#</h4>' +
'</div>' +
'<div class="line-panel row bg-prm-blue modal-footer" style="padding: 3px 10px;">' +
'<div class="pull-right">#buttonTemplate#</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
;

return this.each(function (index) {
var confirmLink = $(this);
var targetData = confirmLink.data();

var currentOptions = $.extend(options, targetData);

var modalId = "confirmModal" + parseInt(time + index);
var modalTemplate = headModalTemplate;
var buttonTemplate =
'<button class="btn btn-#Style# btn-primary" style="margin-left: 10px;" data-dismiss="ok">#Ok#</button>';
if (!options.hiddenCancel) {
buttonTemplate += '<button class="btn btn-default btn-primary" style="margin-left: 10px;" data-dismiss="modal">#Cancel#</button>';
}

if (options.confirmDirection == 'ltr') {
if (!options.hiddenCancel) {
buttonTemplate = '<button class="btn btn-default btn-primary" style="margin-left: 10px;" data-dismiss="modal">#Cancel#</button>';
} else {
buttonTemplate = '';
}
buttonTemplate += '<button class="btn btn-#Style# btn-primary" style="margin: 10px;" data-dismiss="ok">#Ok#</button>';
}

modalTemplate = modalTemplate.
replace('#buttonTemplate#', buttonTemplate).
replace('#modalId#', modalId).
replace('#AriaLabel#', options.confirmTitle).
replace('#Heading#', options.confirmTitle).
replace('#Body#', options.confirmMessage).
replace('#Ok#', options.confirmOk).
replace('#Cancel#', options.confirmCancel).
replace('#Style#', options.confirmStyle).
replace('#CssClass#', options.cssClass)
;

body.append(modalTemplate);

var confirmModal = $('#' + modalId);

confirmLink.on('click', function (modalEvent) {
modalEvent.preventDefault();
confirmModal.modal('show');
confirmModal.draggable({
handle: ".line-panel.bg-cyan.row"
});
});

$('button[data-dismiss="ok"]', confirmModal).on('click', function (event) {
confirmModal.modal('hide');
options.confirmCallback(confirmLink);
});

$('button[data-dismiss="modal"]', confirmModal).on('click', function (event) {
confirmModal.modal('hide');
options.confirmCancelCallback();
});
});

function defaultCallback(target) {
window.location = $(target).attr('href');
}

function defaultCancelCallback() {
}
};
})(jQuery);

Categories

Recent posts