combining two functions to check if true then continue

Question

I have two triggers, one which returns a boolean from a confirm and the other that sends a ajax request.

I noticed that simply using the functions as they are, even if you click cancel the ajax still follows through. My issue is that the confirm trigger is broad and is used by more than one trigger used for different things. So how would I go about checking if confirm returns false?

Heres an example:

This is my code to check to see if the confirm link is clicked

$('div.answers').on('click', '.confirm', function() {
    return confirm('Are you sure?');
});

This is the code which does ajaxy things but also has the confirm class:

$('div.answers').on('click', '.trg-delete', function() {
    var that = $(this);
    var itemid = that.data("id");

    $.ajax({
        type: "POST",
        url: "./delete-answer.php",
        data: { itemID: itemid }
    })
    .done(function(data) {
        if(data == 1) {
            that
            .css("color", "#27AE60")
            .html('<i class="fa fa-fw fa-check"></i>');
        } else {
            that
            .css("color", "#C0392B")
            .html('<i class="fa fa-fw fa-close"></i>');
        };

        window.setTimeout(function() {
            that
            .css("color", "")
            .html('<i class="fa fa-fw fa-close"></i>');
        }, 5000);
    })
    .fail(function(data) {
        that
            .css("color", "#C0392B")
            .html('<i class="fa fa-fw fa-close"></i>');

        window.setTimeout(function() {
            that
            .css("color", "")
            .html('<i class="fa fa-fw fa-close"></i>');
        }, 5000);
    });
});

As you can see, these two are completely separate as I also have triggers such as trg-open, trg-closed, trg-choice which all do totally different things, but also have the confirm class.

What would be the easiest way to edit, in this example, the trg-delete on click to check to see if the confirm on click returns true or false ?

Note: I did see this but it is different as I am using on('click')s where he has functions.

do you want the second function to work in the `confirm` button click too? — rrk, Jul 27 '15 at 10:53
@RejithRKrishnan I was hoping there would be an easy way for `.trg-delete` to check to see if `.confirm` returned `true` or `false` without _combining_ them together as `.confirm` is used else where — 099, Jul 27 '15 at 10:55

score 0 · Accepted Answer · answered Jul 27 '15 at 10:58

Why build two separate events?

Why not only on the .trg-delete (note the second line):

$('div.answers').on('click', '.trg-delete', function() {
  if( confirm( "Are you sure?" ) ) { 
    var that = $(this);
    var itemid = that.data("id");

    $.ajax({
      type: "POST",
      url: "./delete-answer.php",
      data: { itemID: itemid }
    })
    .done(function(data) {
      if(data == 1) {
        that
        .css("color", "#27AE60")
        .html('<i class="fa fa-fw fa-check"></i>');
      } else {
        that
        .css("color", "#C0392B")
        .html('<i class="fa fa-fw fa-close"></i>');
      };

      window.setTimeout(function() {
        that
        .css("color", "")
        .html('<i class="fa fa-fw fa-close"></i>');
      }, 5000);
    })
    .fail(function(data) {
      that
      .css("color", "#C0392B")
      .html('<i class="fa fa-fw fa-close"></i>');

      window.setTimeout(function() {
        that
        .css("color", "")
        .html('<i class="fa fa-fw fa-close"></i>');
      }, 5000);
    });
  }
});

Not really what I was looking for, but I guess I'll do this... Thanks! — 099, Jul 27 '15 at 11:02
Because `.confirm` is used _everywhere_ so it would be more useful just to have it as it's own function rather than rewriting it, but I guess I'd still have to rewrite the _check if true_ so, all good. — 099, Jul 27 '15 at 11:07

Roamer-1888 · Answer 2 · 2015-07-27T17:07:35.060

Simply returning a "confirmed" boolean from the first click handler won't have any affect on the second click handler. The two actions will remain independent.

However, you can achieve the desired action by suppressing the second click action and triggering it, conditionally, from the first.

Fortunately, jQuery allows custom events, which are very useful in cases such as this.

$('div.answers').on('click', '.confirm', function() {
    if( confirm('Are you sure?') ) {
        $(this).trigger('confirmed');
    }
});

// Now specify a custom `confirmed` handler
$('div.answers').on('confirmed', '.trg-delete', function() {
    var that = $(this);
    var itemid = that.data("id");

    $.ajax({
        type: "POST",
        url: "./delete-answer.php",
        data: { itemID: itemid }
    })
    // etc.
});

DEMO

@user4985641, I've added a demo. – Roamer-1888 Jul 27 '15 at 17:07 — Roamer-1888, Jul 27 '15 at 17:07

combining two functions to check if true then continue

2 Answers2