How to implement a custom 'confirm' prompt in JS using promises-CodePudding

This is the base code

$(".add-item").click(function() {
  var flag;
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    if (confirm("Add with a flag?") == true) {
      flag = true
    } else {
      flag = false
    }
  } 
  addItem(flag)
})

What I want to do though, is build a robust modal containing specific instructions about how to answer the 'Add with a flag?' question being posed. Within the modal, there will be 2 button elements for 'Yes' vs 'No'. So think of this as a basic modal (using Bootstrap):

<div  tabindex="-1" role="dialog" aria-labelledby="flag_modal" aria-hidden="true" id="flag_modal">
    <div  role="document">
      <div >
        <div >
          <h2 >
            Add with a flag?
          </h2>
        </div>
        <div >
          <!-- detailed instructions -->
          <button id="yes" >Yes</button>
          <button id="no" >No</button>
        </div>
      </div>
    </div>
</div>

Like the default confirm alert, the UX is that when add-item is clicked, if the not-included logic calculates that ask_about_flag is true, this modal pops up, and the code doesn't proceed to call addItem until user selects either #yes or #no to set the value of the flag.

However, it's also possible that upon add-item click, the not-included logic calculates that ask_about_flag is false, so the modal doesn't show and addItem is called (flag = null in this case).

Because of this, I think it makes sense for code organizing to keep addItem function call within the add-item click, rather than push it down into the button handlers (to be clear code below would work)

$(".add-item").click(function() {
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    $("#flag_modal").show()
  } 
  addItem()
})

$("#yes").click(function() {
  addItem(true)
})

$("#no").click(function() {
  addItem(false)
})

I want to do something instead like:

$(".add-item").click(function() {
  var flag;
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    // pop up modal to ask user to set value of flag
  } 
  // wait to execute until value of flag is set, if needed
  addItem(flag)
})

Seems like Promises are the way (let me know if not!), but that's still pretty new to me, so I took a stab with the below. Working up until when I click a yes or no button where I get Uncaught TypeError: promise.resolve is not a function

var promise; // declare so that it's available both from within `add-item` and `button` handlers

$(".add-item").click(function() {
  promise = new Promise(function(resolve, reject) { 
    var ask_about_flag = // some logic ... 
    if (ask_about_flag == true) {
      $("#flag_modal").modal("show")
    } else {
      resolve(null)
    }
  })

  promise.then(function(flag) {
    // flag is the parameter passed to resolve
    addItem(flag)
  })
})

$("#yes").click(function() {
  promise.resolve(true)
})

$("#no").click(function() {
  promise.resolve(false)
})

FIDDLE: https://jsfiddle.net/0g76ce5s/

CodePudding user response：

Example how to implement logic:

    <script>
        function addItem(flag) {
            //--Your logic here when press yer or no, flag var can be true/false
        }
        $(function() {
            $("#yes").click(function() {
                addItem(true);
            });
    
            $("#no").click(function() {
                addItem(false);
            });
        }
    </script>
    <button onClick="$('#flag_modal').show();return false;">Show modal for confirmation</button>

CodePudding user response：

Actually, I prefer your first approach as it is more separation of concerns.

However if you want to do the Promise approach, what you need to pass is the resolve function instead of the Promise.

Example below:

var resolveGlobal; // declare so that it's available both from within `add-item` and `button` handlers

$(".add-item").click(function () {
    promise = new Promise(function (resolve, reject) {
        var ask_about_flag = true;
        if (ask_about_flag) {
            $("#flag_modal").modal("show");
            resolveGlobal = resolve;
        } else {
            resolve(null);
        }
    });

    promise.then(function (flag) {
        // flag is the parameter passed to resolve
        addItem(flag);
    });
});

$("#yes").click(function () {
    resolveGlobal(true);
});

$("#no").click(function () {
    resolveGlobal(false);
});

function addItem(flag) {
    console.log(flag);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"
        ></script>
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous"
        />
        <script
            src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
            crossorigin="anonymous"
        ></script>
    </head>
    <body>
        <div id="box">
            <div
                
                tabindex="-1"
                role="dialog"
                aria-labelledby="flag_modal"
                aria-hidden="true"
                id="flag_modal"
            >
                <div  role="document">
                    <div >
                        <div >
                            <h2 >
                                Add with a flag?
                            </h2>
                        </div>
                        <div >
                            <!-- detailed instructions -->
                            <button id="yes" >Yes</button>
                            <button id="no" >No</button>
                        </div>
                    </div>
                </div>
            </div>

            <button >Add item</button>
        </div>
    </body>
</html>