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?

Answer 1

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');
          });
        }
  });

Answer 2

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

Answer 3

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')  
      }
    }

})

Answer 4

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');
  }
});