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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.