Trying to get working javascript dialog box using promise and passing parameters

Question

I have read/tried the 'Use promises' section at: How do I return the response from an asynchronous call? but that example does not include a parameter (but it appears to be passing okay in the below code) nor does it work when I added similar code (shown below). Nothing else I've come cross has gotten me this close to the code working. Essentially 'callingFunction' is called during onLoad and needs to pass a parameter to myDialog and wait for user response before continuing to the alerts(in this simplified example). The way it is now shows me the 'start' and 'end' alerts and then I get to see the dialog. When I click on either button (for the first time only), I am shown the 'oops'. So the code is currently not waiting for the promise delivery or acknowledging the resolve value correctly. How can this be fixed?

function myDialog(question) {
 return new Promise(function(resolve, reject) {

    var box = document.createElement('div');  
    box.style.position = "absolute";
    box.style.top = "300px";
    box.style.left = "300px";
    box.style.width = "200px";
    box.style.height = "100px";

    var text = document.createTextNode(question);
    text.margin = "20px";
    box.appendChild(text);

    var button_yes = document.createElement("button");
    button_yes.innerHTML = "Yes";
    button_yes.onclick = function() { resolve(true); }
    box.appendChild(button_yes);

    var button_no = document.createElement("button");
    button_no.innerHTML = "No";
    button_no.onclick = function() { resolve(false); }
    box.appendChild(button_no);

    window.parent.document.body.appendChild(box);
 })
}

function callingFunction(question) {
   alert('start');
   myDialog(question).then(function(v) {
     window.parent.document.body.removeChild(box); 
     if (v == true) {
            alert('true selected');
       }else{
            alert('false selected');
       }
   }).catch(function(v) {
       alert('oops');
   });
   alert('end');
}

score 0 · Accepted Answer · answered Nov 03 '16 at 08:51

So the code is currently not waiting for the promise delivery or acknowledging the resolve value correctly.

Actually, it is. Try alerting/logging the v value to see what the culprit is. You'll get an error message saying that box is not defined in the line

window.parent.document.body.removeChild(box);

which is totally accurate - your box variable is scoped to the promise callback in myDialog. You can use

function myDialog(question) {
  return new Promise(function(resolve, reject) {
    var container = window.parent.document.body
    var box = document.createElement('div');  
    box.style.position = "absolute";
    box.style.top = "300px";
    box.style.left = "300px";
    box.style.width = "200px";
    box.style.height = "100px";

    var text = document.createTextNode(question);
    text.margin = "20px";
    box.appendChild(text);

    var button_yes = document.createElement("button");
    button_yes.textContent = "Yes";
    button_yes.onclick = function() {
      resolve(true);
      container.removeChild(box);
    };
    box.appendChild(button_yes);

    var button_no = document.createElement("button");
    button_no.textContent = "No";
    button_no.onclick = function() {
      resolve(false);
      container.removeChild(box);
    };
    box.appendChild(button_no);

    container.appendChild(box);
  });
}

function callingFunction(question) {
  alert('start');
  myDialog(question).then(function(v) {
    alert(v+' selected');
  }).catch(function(e) {
    alert('something went wrong: '+e);
  });
}

Thank you for being another pair of eyes! I was not getting a box error this time but that fixes the issue of resolving the proper value. Now how to get it to wait for the promise resolve is set before displaying alert end? It is still executing code after 'end' that needs the resolve value first. — Mike Tezel, Nov 03 '16 at 13:16
You've got to put the `alert(end)` inside the `then` callback, just after the `alert(v+' selected')`. Putting it outside will never work - welcome to the wonderful world of asynchrony! — Bergi, Nov 03 '16 at 14:30
Ah, okay, dangit. Guess something is better than nothing. Wanted to keep the outside code a simple function call to set a variable for further code. Thank you very much for the insight. — Mike Tezel, Nov 03 '16 at 14:46
Just pass that very function (which you wanted to call with the value) directly to `then`. — Bergi, Nov 03 '16 at 14:50

Trying to get working javascript dialog box using promise and passing parameters

1 Answers1