Custom Alert in Jquery does not wait and returns the click event

Question

I've been working on jquery past few months and liked working new things on it.

Recently I am stuck on a custom alert using a modal pop up that I made (using semantic ui, not using jquery ui)....

I wanted to perform an click event (which works perfectly)..but before that I wanted to call this custom alert

the custom alert which I made is

function confirmAlert(msg,OnSuccess){
  $('<div style="width:30%;height:15%;margin-left:-15em;" align="center" id="divretwhlsucc" class="ui tiny modal"> <div class="content"> <i class="checkmark big green box icon"></i>'+msg+'</div> <div class="actions"> <div class="ui black deny button">No</div><div class="ui positive right icon button">OK</div></div></div/>')
  .modal({
    closable  : false,
    onDeny    : function(){
    },
    onApprove : function() {
      return true;
    }
  })
  .modal('show');
}

This modal pops up when I try to perfect the click event (which is written below)

$("#btnwhlsuppdel").click(function(){
      debugger;
      confirmAlert("Are you sure you want to delete?",function(){
          debugger;
          var a = [];
          var info = [];
          var cboxes = $('input[name="suppcheck[]"]:checked');
          var len = cboxes.length;
          for (var i=0; i<len; i++) {
            a[i] = cboxes[i].value;
            $("#hiddwhlsuppgrp").val(a);
          }
        });
      });

Now, When even I trigger the event, It does not wait for the onApprove function on the customAlert, and executes directly.

I wanted the customAlert to behave like, if I approve the action to perform , the click event should trigger or else it should return false.

Any answer to this is much much appreciated as I would learn more in Jquery!!

Thank you!

http://stackoverflow.com/questions/3519861/yes-or-no-confirm-box-using-jquery — Bharat, Jan 03 '17 at 05:36
solutions: you have to make two dialog box , One for approve action and second will be display after your approval. — Maneesh Singh, Jan 03 '17 at 05:41

score 0 · Answer 1 · answered Jan 03 '17 at 05:54

You can try bellow. In this code you need to assign success function to onApprove callback.

function confirmAlert(msg,OnSuccess){
  $('<div style="width:30%;height:15%;margin-left:-15em;" align="center" id="divretwhlsucc" class="ui tiny modal"> <div class="content"> <i class="checkmark big green box icon"></i>'+msg+'</div> <div class="actions"> <div class="ui black deny button">No</div><div class="ui positive right icon button">OK</div></div></div>')
  .modal({
    closable  : false,
    onDeny    : function(){
    },
    onApprove : OnSuccess
  })
  .modal('show');
}

$("#btnwhlsuppdel").click(function(){      
      confirmAlert("Are you sure you want to delete?",function(){         
          var a = [];
          var info = [];
          var cboxes = $('input[name="suppcheck[]"]:checked');
          var len = cboxes.length;
          for (var i=0; i<len; i++) {
            a[i] = cboxes[i].value;
            $("#hiddwhlsuppgrp").val(a);
          }
        });
      });

Custom Alert in Jquery does not wait and returns the click event

1 Answers1