Angular 1 and Angular 2 Integration

jQuery alert/confirm dialog box Yes/No and Ok

Follow steps to create your jQuery confirmation dialog and Alert dialog box.

1.       Use jQuery and jQuery UI reference files.
2.       Global master HTML div with a page element for appends and display dialog box dynamically.
3.       JavaScript confirm dialog box Yes/No and Alert dialog Ok, common methods.
4.       Use of common methods to display jQuery confirm dialog box Yes/No and Alert dialog Ok.

                                             I.            Alter dialog OK
                                           II.            Confirmation Dialog Yes/No

Common and Global HTML div for display dialog box dynamically.

@*CONFIRMATION DIALOG BOX*@
<div id="divAlertDialog"><p></p></div>

JavaScript confirm dialog box yes no and Alert dialog Ok, common methods.

//#region NAMESPACE
var pm = pm || {};

//#endregion


window.pm.dialog = window.pm.dialog || (function () {

    //#region BELOW METHOD IS USED TO SHOW CONFIRMATION DIALOG

    var confirmationDialog = function (title, contentHeading, content, successCallBack, cancelCallBack) {
        $('#divAlertDialog').dialog({
            dialogClass: 'fixed-dialog-alert sweet-alert showSweetAlert',
            modal: true,
            resizable: false,
            draggable: false,
            width: 500,
            //title: "<i class='fa fa-exclamation-triangle'></i>" + title,
            title: title,
            open: function (event, ui) {
                $('#divAlertDialog p').empty().html('<div class="icon warning pulseWarning" style="display: block;"> <span class="body pulseWarningIns"></span> <span class="dot pulseWarningIns"></span> </div>' + '<h2>' + contentHeading + '</h2> <p>' + content + '</p>');
            },
            buttons: {
                OK: function () {
                    $(this).dialog("close");
                    if (successCallBack !== undefined && successCallBack !== null) {
                        successCallBack();
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                    if (cancelCallBack !== undefined && cancelCallBack !== null) {
                        cancelCallBack();
                    }
                }
            }
        });
    }

    //#endregion


    //#region BELOW METHOD IS USED TO SHOW ALERT DIALOG

    var alertDialog = function (type, title, contentHeading, content, successCallBack) {
        $('#divAlertDialog').dialog({
            dialogClass: 'fixed-dialog-alert sweet-alert showSweetAlert ' + type,
            modal: true,
            resizable: false,
            draggable: false,
            width: 500,
            //title: "<i class='fa fa-exclamation-triangle'></i>" + title,
            title: title,
            open: function (event, ui) {
                if(type === 'success')
                    $('#divAlertDialog p').empty().html('<div class="icon success animate" style="display: block;"> <span class="line tip animateSuccessTip"></span> <span class="line long animateSuccessLong"></span> <div class="placeholder"></div> <div class="fix"></div> </div>' + '<h2>' + contentHeading + '</h2> <p>' + content + '</p>');
                else if(type === 'error')
                    $('#divAlertDialog p').empty().html('<div class="icon error animateErrorIcon" style="display: block;"><span class="x-mark animateXMark"><span class="line left"></span><span class="line right"></span></span></div>' + '<h2>' + contentHeading + '</h2> <p>' + content + '</p>');
                else if (type === 'info')
                    $('#divAlertDialog p').empty().html('<div class="icon info" style="display: block;"></div>' + '<h2>' + contentHeading + '</h2> <p>' + content + '</p>');
            },
            buttons: {
                OK: function () {
                    $(this).dialog("close");
                    if (successCallBack !== undefined && successCallBack !== null) {
                        successCallBack();
                    }
                }
            }
        });
    }

    //#endregion

    return {
        confirmationDialog: confirmationDialog,
        alertDialog: alertDialog
    }

})();


Use of common methods to display confirm dialog box yes no and Alert dialog Ok.

1.       Alter dialog Ok
2.       Confirmation Dialog Yes/No

Alert dialog OK

pm.dialog.alertDialog('error', 'Error', 'Error', 'Unable to process you’re your Request.', null);

Confirmation dialog Yes/No

pm.dialog.confirmationDialog('Warning!''Are you sure?'' ',
function () {   //TODO: your custom login if yes.},
null);


For more detail, you can go link http://jqueryui.com/dialog/#modal-confirmation


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.