Create a confirmation alert for delete button in Angular using JS

Question

I have a form that has a delete button, I would like to create a confirmation box that pop ups when the delete button is clicked. The delete button currently works. I have tried several things in javascript with no luck. I am using Angular.

Is this best approach for this?

Also, does anyone know of any examples for this, I have not found any that work.

$(document).ready(function(){
  $("form").validate();
  $(".radius small success button").ConfirmDialog('Are you sure?');
});

How about some real code instead of psuedo code -- please show us what you have tried, and indicate what is not working. — Mark Rajcok
– Mark Rajcok, Commented Mar 14, 2013 at 22:14
@MarkRajcok thats fair, I have added what I have. Any thoughts am I in the right direction? — FluxEngine
– FluxEngine, Commented Mar 14, 2013 at 22:24

Steve Rogers · Accepted Answer · 2014-08-13 18:49:49Z

43

Seems like an AngularJS directive is a bit over-the-top for a solution to this. Seems easier just to use straight javascript unless you need some custom functionality to your "confirm()" function.

if (confirm('Are you sure you want to delete this?')) {
     // TODO:  Do something here if the answer is "Ok".
}

Hope this helps, cheers

UPDATE: Actually, with Angular, it would be better to use $window.confirm as this would allow you to test with Karma/Jasmine.

edited Aug 13, 2014 at 18:49

answered May 15, 2014 at 14:22

Steve Rogers

1,1233 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Ionescu Over a year ago

this would work fine until the user chooses not to display alerts/confirms in Chrome. In Chrome, when you get a confirm, there is a checkbox "do not show messages like this". And it's gone.

Steve Rogers Over a year ago

Sure, but the alerts is on by default. To prevent that, a directive that handles alert boxes without using confirm() would fix that.

asafge · Accepted Answer · 2014-04-26 08:30:43Z

28

Here's another approach at this. Basically it's a directive that gets the warning string you want to show, and the function to call if the user accepts. Usage example:

<button type="button" ng-really-message="Are you sure?"
ng-really-click="delete()">Delete</button>

edited Apr 26, 2014 at 8:30

answered Nov 12, 2013 at 13:16

asafge

1,1391 gold badge14 silver badges21 bronze badges

5 Comments

Malkus Over a year ago

A basic browser dialog box can be displayed without a directive if(confirim('Are you sure?')) { Do Something } does the exact same thing which much less overhead.

Malkus Over a year ago

Please include all code for your solution in your answer.

Guy Argo Over a year ago

He did include all the necessary code - click on the word 'Here'. And, no, you cannot use confirm with ng-click because you cannot have control flow inside those expressions.

Malkus Over a year ago

@GuyArgo it is OK to link to external site, however; all relevant code should be included in the answer in case the site becomes unavailable See Provide Context for Links. And the control flow could be placed in the delete() method which removes the need for the directive Example

Nikita Chernykh Over a year ago

if this needs to be implemented in google extension you can't use inline javascript so directive will be a good solution.

Christopher Marshall · Accepted Answer · 2015-05-11 17:41:53Z

9

This is how we're handling our 'confirmation dialogs' (using bootstrap)

The Markup

<div class="alert alert-block alert-error notification fade in" data-ng-show="displayLocationDeletePopup">
    <h6>Are you sure you want to delete this location?</h6>
    <div class="form-controls-alert">
        <a href="" class="btn" data-ng-click="showDeleteLocationPopup(false)">No</a>
        <a href="" class="btn btn-danger" data-ng-click="deleteVendorLocation(locationId)">Yes</a>
    </div>
</div><!-- end alert -->

Setting model to false on controller load to hide by default with ng-show

$scope.displayLocationDeletePopup = false;

On click on event for show popup, calls a function/passes model in

<i class="icon-remove" data-ng-click="showDeleteLocationPopup(true, location)"></i>

In the controller:

$scope.showDeleteLocationPopup = function(options, id) {
    if (options === true) {
        $scope.displayLocationDeletePopup = true;
    } else {
        $scope.displayLocationDeletePopup = false;
    }
    $scope.locationId = id;
};

And per the anchors in the html above, can either close the popup or run the function

$scope.deleteVendorLocation = function (storeLocation) {
   // Code to run on confirmation            
};

edited May 11, 2015 at 17:41

user571203

answered Mar 14, 2013 at 22:25

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

1 Comment

Steve Rogers Over a year ago

I like this one for bootstrap users.

Fiona Runge · Accepted Answer · 2016-07-02 15:02:18Z

-1

var r = confirm("Are you sure you want to Permanently delete this order?");
if (r == true) {
    (OK button click) Write the function here.....
} else {
    (Cancle button click) Write the function here.....
}

edited Jul 2, 2016 at 15:02

Fiona Runge

2,3297 gold badges39 silver badges53 bronze badges

answered Jul 1, 2016 at 11:49

Av.Raj

659 bronze badges

Comments

Sabari Dhoni · Accepted Answer · 2017-08-09 06:48:29Z

-1

Place Delete option on the right hand side of each record and on clicking the delete option the record should get deleted from the details and JSON array.

answered Aug 9, 2017 at 6:48

Sabari Dhoni

1

Collectives™ on Stack Overflow

Create a confirmation alert for delete button in Angular using JS

5 Answers 5

2 Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related