Need to press delete button twice for deleting a post in Node.js application

In a nodejs application previously it was using custom js confirms, so I have removed that and applied confirms using Bootblox.js.

After pressing the delete post button it will ask for confirm and after the confirmation it does not remove the post...rather after pressing the delete button again it removes it from the page....

Previous code using custom JS confirms is-

<form method="POST" action="/delete/<%= one._id %>?_method=DELETE" style="display: inline;">

            <button class="btn btn-sm btn-danger delete-button" 
              style="color: white;" 
              href="/delete/<%= one._id %>"
              onclick="return confirm('Are you sure you want to delete this?')">

              <i class="fas fa-trash"></i>

              </button>
</form>

code which I replaced in place of above using bootblox.js-

In Html tag-

<form method="POST" action="/delete/<%= one._id %>?_method=DELETE" style="display: inline;">

            <button class="btn btn-sm btn-danger delete-button" 
              style="color: white;" 
              href="/delete/<%= one._id %>"
              type="button"
              onclick="return askConfirm(' Warning! ','Are you sure you want to delete this?')">

              <i class="fas fa-trash"></i>

              </button>

 </form>

In the srcipt tag-

var confirmVariable = false;

function askConfirm(title,message){

       bootbox.confirm({
       title: title,
       message: message,
       buttons: {
       cancel: {
           label: '<i class="fa fa-times"></i> Cancel'
       },
       confirm: {
           label: '<i class="fa fa-check"></i> Confirm'
       }
      },
      callback: function (result) {
        if(result){
          confirmVariable=true;
        } else {
          confirmVariable=false; 
        }
       }
      });

        if(confirmVariable==true){
            return true;
        }else{
            return false;
        } 
  }

As in custom/default JS confirms it returns a 'true' or 'false' on selection of 'OK' or 'Cancel', the confirms using another js library doesnt, so here i have made a function 'askConfirm()', which is defined in script tag. In this function it will open the confirm window and open selcting OK or Cancel it will set the variable 'confirmVariable==true' or 'confirmVariable==false' and will return to the 'onclick' on the html tag. So as like the default confirms it was expected to submit the delete form in one go and delete it from the page.

But the problem is that when i press delete button confirm window appears and upon selecting Ok it doesn't deletes the post...rather when i click delete button again after this it deletes it.

I want to make it delete in one go. How can it be made? Please help! Thanks in Advance!

You have an issue where you check for if(confirmVariable==true) before its been set. Its a typical async issue where you check for something before the action has been completed.

Where you wait for the user to click confirm/cancel, the position you set the variable is in a callback, so will only change when the user clicks a button. You immediately check for a result before the user clicks, which I assume is false at first. Then the user clicks and the value changed. Now the second time the user clicks, you immediately check what they clicked and you, by accident, look at the button they clicked the first time.

So when you provide the popup to the user with this, rather do your action inside the callback

  bootbox.confirm({
       title: title,
       message: message,
       buttons: {
       cancel: {
           label: '<i class="fa fa-times"></i> Cancel'
       },
       confirm: {
           label: '<i class="fa fa-check"></i> Confirm'
      }
    },
    callback: function (result) {
      if(result)
         doThis(true)
      else 
         doThis(false)
    }
  });

  function doThis(confirmed){
     if (confirmed)
       console.log('user clicked confirm')
     else 
       console.log('user clicked cancel')
  }

If you want style points you can simply do this

bootbox.confirm({
       title: title,
       message: message,
       buttons: {
       cancel: {
           label: '<i class="fa fa-times"></i> Cancel'
       },
       confirm: {
           label: '<i class="fa fa-check"></i> Confirm'
      }
    },
    callback: doThis
  });

  function doThis(confirmed){
     if (confirmed)
       console.log('user clicked confirm')
     else 
       console.log('user clicked cancel')
  }