0

I've been doing a lot of research on this. I ended up borrowing from the JS libraries out there and rolling my own version for alert, confirm and prompt.

The main issue is that these type of messages do not pause execution like the windows versions do. I tried break and throw but neither worked. Usually during prompt the whole point is to wait for user input. Since there is no code pause then the workflow continues without waiting. In some cases I could handle it by putting the code in the callback. But that doesn't always fit what I need.

Unfortunately the IE implementation is really ugly. Chrome is nicer but can't force users to use Chrome.

Has anyone figured out a way to make these really behave like the windows versions.

cxxxv
  • 9
  • 2

3 Answers3

0

There is (fortunately) no way to achieve the exact same blocking behavior as window's alert, prompt & confirm. They are acting in a native nature while something mimicking this behavior will not act as the original functions do.

Usually during prompt the whole point is to wait for user input. Since there is no code pause then the workflow continues without waiting.

JavaScript's asynchronous nature offers some neat constructs to change your workflow in a way so it doesn't need blocking code to work properly. async/await is one of those constructs. Using this gives the feeling of writing blocking code (it is non-blocking in fact) which might go along with your current code structure.

Trying to achieve actual blocking of JavaScript execution by using an unproductive infinite loop as an example won't work well in this situation. Such a loop can easily be bypassed by using developer tools provided by most browsers not to mention how inefficient and power consuming it is.

Fore sure most (if not any) things can be bypassed by using developer tools. Therefore you should aim for an asynchronous solution (or any other non-blocking approach) instead of messing around with things like infinite loops to achieve blocking code execution.

Bee
  • 1,306
  • 2
  • 10
  • 24
0

Since you already mentioned callbacks, I would like to introduce Promises.

Promises give you an opportunity to make the code look like it is synchronously, while in fact it runs asynchronously.

To give you an example, I'm using the jQuery UI Modal Form demo as a basis: 

const myAlert = (msg) => {
    return new Promise((resolve, reject) => {
    $("#dialog-form").text(msg);
    var dialog = $("#dialog-form").dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        Ok: function() {
          dialog.dialog( "close" );
          resolve();
        }
      }
    }
})};

And call it with

myAlert('This is my alert').then(() => {
    // Execution continues after button click
});

Most major browsers support promises out of the box: Can I use promises?

rollstuhlfahrer
  • 3,988
  • 9
  • 25
  • 38
0

Aha.....I knew there had to be something. I was not aware of async/await. I can see many uses for this. Thanks.

cxxxv
  • 9
  • 2
  • I appreciate it I could help. Actually you should delete this answer and just post it as a comment underneath my answer which you can accept as well. – Bee Apr 13 '18 at 14:07
  • Well then. Appears aync does not work in IE11...or I am doing something wrong. I took and example and pasted it, but it will not work. Here is my example `async function f() { return 1; }` f().then(alert); // 1 – cxxxv Apr 13 '18 at 15:14
  • IE 11 doesn't support async functions neither promises. You actually will need to use a so called polyfill for this. Those are basically libraries that bring a certain feature to a browser which does not support it natively. Instead of using polyfills there is another approach using transpilers (like [Babel](https://babeljs.io/)) which will convert ES6 to ES5 code (which will work in IE 11). – Bee Apr 13 '18 at 15:30
  • Going to skip this for the time being. More trouble than it's worth. – cxxxv Apr 13 '18 at 16:01