The "meteor way" to get the user to confirm a click on a button before continuing the action of the button


#1

This seems like a common usecase: I have a button that when clicked, will delete a record. I would like to pop up a dialog box asking, “are you sure you want to delete?”… and if they press ok, it will then continue the “clicked” action on the button, but if they press cancel, it will just return to the page and nothing will have happened.

With PHP, I would solve this as such:

<a onclick="if
 (confirm('Are you sure you want to remove this record?')) 
{window.location='https://mysite.com/?action=deleteRec&id=9851030'};" href="#" title="remove">

And then my delete rec action would do the delete, and redirect back to the original page, thus showing that the record is now gone.

But I can’t think of how this would be done in meteor. I found a few discussions that seemed to be very complicated.

this one:

went on for a while in a chat, and I’m not sure if they solved it or not.


#2

This doesn’t answer your question, but poses another question that perhaps you should answer first: Do you really want confirmation or are you actually after undo?
Once I thought about it, I realised alot of my use cases called for the latter.

If you’re curious or have unlimited time to spare, here’s a more indepth article on it: http://alistapart.com/article/neveruseawarning


#3

@wesyah234 i think this example works and you can follow it easily http://meteorpad.com/pad/D9bw8E5tet75daaMY/Leaderboard


#4

@ralpheiligan : thanks!.. that’s the example I needed, but as I suspected, it’s a lot of work to build the template for the modal popup, and then to write a handler for the click event on the “Yes” button on the dialog, etc. I was hoping it could be made easier — which it probably could if someone had time to build a package…

@mordrax: thanks! … your point is very well taken, and I have implemented that exact suggestion. I decided to perform the “delete” action right away without confirmation, and just mark the record as “deleted” … I haven’t decided yet how to allow undeletes, but I’m going down that path none the less.


#5

The easiest and most decent looking solution is to use Sweet Alert. You can check if they hit yes or no in the callback and then run the code. This also won’t block like a regular alert will:

http://t4t5.github.io/sweetalert/


#6

Thanks @SkinnyGeek1010 I’ll give it a try: here’s a meteor repo https://github.com/kevohagan/meteor-sweetalert/


#7

Another option: https://atmospherejs.com/hinas/meteor-bootstrap-confirmation


#8

I use this modal package for doing just want you suggest.

Clicking the delete button opens the modal

  'click .__deleteLineItem': function(e, t) {
Modal.show('cartViewDeleteConfirmModal', {
  product: this,
  productName: this.productName,
});
},

modal looks like this

<template name="cartViewDeleteConfirmModal">
  <div class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
            {{mf 'cartViewDeleteConfirmModal.delete' 'Remove Item'}}:<br/>
          <p class="text-danger">"{{this.productName}}"</p>
            {{mf 'cartViewDeleteConfirmModal.areYouSure' 'Are you sure?'}}
        </div>
        <div class="modal-footer">
              <button class="__cancel btn btn-default">No</button>
              <button class="__delete btn btn-danger">Yes</button>
            </div>
      </div>
    </div>
  </div>
</template>

confirm click actually does the delete

Template.cartViewDeleteConfirmModal.events({
  'click .__cancel': function(e, t) {
    Modal.hide();
  },

  'click .__delete': function(e, t) {
    var self = this;
    Meteor.call('cart.removeLineItem', {
      cartId: self.product.parent._id,
      lineItemId: self.product._id,
    }, function(err){
      Modal.hide();
      if(!err){
        toastr.success('Item removed.', 'Success');
        analytics.track('Deleted a cart line item');
      } else {
        toastr.error(err.message, 'Error removing item');
      }
    });
  },
});

#9

Thank you for the suggestions… I am going with the “undo” option, but in the future, if I need a confirmation popup, this thread will be a good source of info.


#10

Sweet Alert is a great little module that gives you great looking popups, for confirmation and other alerts.

Here’s a StackOverflow post that explains how to use Sweet Alert with Bootstrap/React: