How can I implement a wait mechanism until receiving confirm dialog response?

Question

Here is my code:

    $(function () {
        $(document).on('click', '.fa-times', function(e){
            e.stopPropagation();

            var result = ConfirmDialog('Are you sure?');
            if (result) {return false}

            var row = $(this).closest('tr');
            row.css('opacity','0.3');
            var word = $(this).closest('td').siblings('.word').text();
            $.ajax({
                url :  '../../te_addStopWord',
                type : 'GET',
                data: {word : word},
                dataType : 'JSON',
                success : function () {
                    row.remove();
                }, // success
                error : function ($a,$b,$c) {
                    alert($b);
                    row.css('opacity','1');
                }
            }); // ajax
        })


        function ConfirmDialog(message) {
            $('<div></div>').appendTo('body')
                    .html('<div><h6>'+message+'?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                $(this).remove();
                                return true;
                            },
                            No: function () {
                                $(this).remove();
                                return false;
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
        };


    })

But my code run that ajax request without waiting for the response of ConfirmDialog(message) function. How can I force it to wait?

Answer 1

You have 2 functions which get triggered depending on which confirm button is selected. Handle your ajax code from there.

I liked how Abhijit's answer abstracted out the code, but I think he missed something.

$(function() {
  $(document).on('click', '.fa-times', function(e) {
    e.stopPropagation();

    function getConfirmHandler(element){
      return function handleConfirm(result) {
          if (result) {
            return false
          }

          var row = element.closest('tr');
          row.css('opacity', '0.3');
          var word = element.closest('td').siblings('.word').text();
          $.ajax({
            url: '../../te_addStopWord',
            type: 'GET',
            data: {
              word: word
            },
            dataType: 'JSON',
            success: function() {
              row.remove();
            }, // success
            error: function($a, $b, $c) {
              alert($b);
              row.css('opacity', '1');
            }
          }); // ajax
      }
    }

    ConfirmDialog('Are you sure?', getConfirmHandler($(this)))
  });


  function ConfirmDialog(message, callback) {
    $('<div></div>').appendTo('body')
      .html('<div><h6>' + message + '?</h6></div>')
      .dialog({
        modal: true,
        title: 'Delete message',
        zIndex: 10000,
        autoOpen: true,
        width: 'auto',
        resizable: false,
        buttons: {
          Yes: function() {
            $(this).remove();
            callback(true);
          },
          No: function() {
            $(this).remove();
            callback(false);
          }
        },
        close: function(event, ui) {
          $(this).remove();
        }
      });
  };


})

Answer 2

Try move ajax into your ConfirmDialog:yesfunction. Or Try to use promise.

buttons: {
            Yes: function () {
                 var row = $(this).closest('tr');
                 row.css('opacity','0.3');
                 var word = $(this).closest('td').siblings('.word').text();
                 $.ajax({
            url :  '../../te_addStopWord',
            type : 'GET',
            data: {word : word},
            dataType : 'JSON',
            success : function () {
                row.remove();
            }, // success
            error : function ($a,$b,$c) {
                alert($b);
                row.css('opacity','1');
            }
        }); // ajax
                                $(this).remove();
                                return true;
                            },
            No: function () {
                                $(this).remove();
                                return false;
                            }
                        },