I have a function where i costumize my sweet-alert dialog. I want to use it in a lot of places and therefore set that in a function like:

$rootScope.giveConfirmDialog = function(title,text,confirmButtonText,toBeExecFunction){
        swal({title: title,   
        text: title,
        .....
        confirmButtonText: confirmButtonText }, 
        toBeExecFunction);
    }

What i want to do is simple: calling that function in somewhere and go on based on the answer of the user, thus:

var res = $scope.$root.giveConfirmDialog("..",
                "test", "test", function () {
                return true;
            });

But i don't take any response. Actually, i couldn't find such an example and i think its not the common way of use. But how can it be possible?

I have a function where i costumize my sweet-alert dialog. I want to use it in a lot of places and therefore set that in a function like:

$rootScope.giveConfirmDialog = function(title,text,confirmButtonText,toBeExecFunction){
        swal({title: title,   
        text: title,
        .....
        confirmButtonText: confirmButtonText }, 
        toBeExecFunction);
    }

What i want to do is simple: calling that function in somewhere and go on based on the answer of the user, thus:

var res = $scope.$root.giveConfirmDialog("..",
                "test", "test", function () {
                return true;
            });

But i don't take any response. Actually, i couldn't find such an example and i think its not the common way of use. But how can it be possible?

• javascript
• angularjs
• confirm
• sweetalert

2 Answers 2

It sounds like you want different behavior based on if the user presses the confirm button or the cancel button.

SweetAlert exposes the user response via a parameter on the callback function.

Here's an example straight form the SweetAlert Docs:

swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false 
    },
    function(isConfirm) {
        if (isConfirm) {
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
        } else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    }
);

In this example, when the confirm button is pressed, a new SweetAlert is opened, confirming your action, and if cancel button is pressed, a new SweetAlert is opened, noting that the action was cancelled. You can replace these calls with whatever functionality you need.

Since this library is using async callbacks, there is not a return value from the swal method.

Also, it would probably be good idea to use a library such as ng-sweet-alert to wrap calls to sweet alert to ensure that any changes you make in Sweet Alert callbacks are properly picked up by the angular lifecycle. If you check out the source for ng-sweet-alert, you'll see that the author wraps the calls to swal and the user's callback in $rootScope.$evalAsync, ensuring that angular updates when the calls and callbacks complete.

From a code style perspective, it would be better to put your logic into a service or factory for reuse throughout your codebase rather than just attaching it to $rootScope.

You will not get response as this is async, you can use the following code snippet:

swal({
    title: "Are You Sure?",
    text: "Are you sure to go ahead with this change?",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes",
    cancelButtonText: "No",
    closeOnConfirm: true,
    closeOnCancel: true,
  },
  function(isConfirm){
    if (isConfirm) {
      $.ajax({
        url:"/path",
        method:"GET",
        data: {
          category_id: category_id,
        },
        success:function(response) {
           // tasks on reponse
        }
      })
    }
  }
);