how to show a confirmation dialog box in toastr

Question

I have the below code for a delete button in the controller,

$scope.removes = function (scope) {
        toastr.success("Delete all?","<br /><br /><button type='button' class='btn clear'>Yes</button>",{
            closeButton: false,
            onClick: function(){
                var nodeData = scope.$modelValue;
                            if(nodeData.nodes.length > 0){
                                toastr.error('Cant delete Sub levels available :', 'Warning', {
                                    closeButton: true
                                });
                            }else{
                                mainMenuService.deleteData(nodeData).success(function(data) {
                                    scope.remove();
                                    toastr.success(data.message, 'Message', {
                                        closeButton: true
                                    });
                                }).error(function(err) {
                                    toastr.error(err, 'Warning', {
                                        closeButton: true
                                    });
                                });
                            }
            }
        })
}

I want to show a confirmation dialog box and want to delete if the use click yes button. But I can't see any button in the toastr message and I don't know how to do it. I have done it exactly as in the documentation. And I want to know if it is possible to put two buttons in the confirmation message?

Bogdan T Stancu · Answer 1 · 2022-05-05T09:02:22.437

14

In case anyone is NOT after Angular solution but back to the basics here it is, really simple.

toastr.success("<br /><br /><button type='button' id='confirmationButtonYes' class='btn clear'>Yes</button>",'delete item?',
  {
      closeButton: false,
      allowHtml: true,
      onShown: function (toast) {
          $("#confirmationButtonYes").click(function(){
            console.log('clicked yes');
          });
        }
  });

edited May 05 '22 at 09:02

answered Nov 17 '16 at 17:52

Bogdan T Stancu

404
5
6

This was exactly what I was looking for! – BrianLegg Jan 10 '17 at 19:48

hsh · Answer 2 · 2016-06-09T12:58:16.367

First of all you need to set allowHtml: true option for toastr like this:

$scope.removes = function (scope) {
    toastr.success("<br /><br /><button type='button' class='btn clear'>Yes</button>",'delete item?',
    {
        closeButton: false,
        allowHtml: true,
        ...
    })
}

also toastr Title is the second argument and content is first one.

I assume you are using Angular Toastr,if so, first you need to know that it doesn't have any onClick event.onTap is the event that triggers when you click on toastr. but it triggers after you click any where on toastr:

toastr.success("Content",'Title',
{
    onTap: function(){
       //Triggers when you click any where on toastr
    },
    ...
});

So I think you want an event that trigger's when the button is clicked,in that case as long as Angular Toastr cant't accept directives in the content or title part duo to security reasons,you need to attach the click event to your button inside toastr's onShow event like this:

$scope.yes = function() {
   alert("You Clicked Yes!!!");
}
var html = "<br /><br /><button type='button' class='btn clear'>Yes</button>";
toastr.success(html,'Are You Sure?',
{
  allowHtml: true,
  onShown: function (toast) {
    angular.element( toast.el[0]).find("button")[0].onclick = $scope.yes;

  }
});

I assembled a sample at Plunker

hope this helps

button is getting visible now but my on click function is not executing — shamila, Jun 09 '16 at 04:20
The only way forward with this example is with 'Yes'. What if you want to cancel? — brt, Mar 25 '20 at 18:08

score 0 · Answer 3 · answered Jun 15 '18 at 01:08

toastr.warning("<br /><button type='button' value='yes'>Yes</button><button type='button'  value='no' >No</button>",'Are you sure you want to delete this item?',
{
    allowHtml: true,
    onclick: function (toast) {
      value = toast.target.value
      if (value == 'yes') {
        console.log(toast.target.value, 'carai')  
      }
    }

})

score 0 · Answer 4 · answered Dec 14 '20 at 19:52

Confirmation popup using toaster in angularjs Here you go >> http://plnkr.co/edit/Ri2ELEglunzesYkO

toastr.success(html,'Are You Sure?',
{
  allowHtml: true,
  timeOut: 50000,
  tapToDismiss: false,
  extendedTimeOut: 100000,
  onShown: function (toast) {
    angular.element( toast.el[0]).find("button")[0].onclick = $scope.yes;
    angular.element( toast.el[1]).find("button")[1].onclick = $scope.no;
  },
  onTap:function(){
    alert(($scope.yesno==true)? 'Yes':'No');
  }
});

score -4 · Answer 5 · answered Sep 15 '17 at 09:30

-4

Why not

toastr.confirm('Are you sure?', {onOk: () => { console.log('ok') }, onCancel: () => { console.log('cancel')}})

answered Sep 15 '17 at 09:30

shajin

3,214
5
38
53

BTW, I am using toastr with react/redux ( https://github.com/diegoddox/react-redux-toastr ). Don't have much idea about angularjs – shajin Sep 15 '17 at 09:36
7

toastr.confirm does not exist – Plasebo Mar 13 '18 at 10:04

how to show a confirmation dialog box in toastr

5 Answers5

Linked