how to show a confirmation dialog box in toastr

问题

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?

回答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='confirmationRevertYes' class='btn clear'>Yes</button>",'delete item?',
  {
      closeButton: false,
      allowHtml: true,
      onShown: function (toast) {
          $("#confirmationRevertYes").click(function(){
            console.log('clicked yes');
          });
        }
  });

回答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

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

})

回答4:

If you want add confirmation box.It is better to use alertify.It is easy to use and understand.Please see the below link:

http://fabien-d.github.io/alertify.js/

回答5:

Why not

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

来源：https://stackoverflow.com/questions/37701722/how-to-show-a-confirmation-dialog-box-in-toastr

标签

javascript

angularjs

toastr