CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-app
Squirrel
Squirrel

Reputation: 392

Alternative to Javascript's prompt() for Google Chrome Web App

I'm currently developing a Chrome Web App using the Chrome Platform APIs and Javascript and I simply can't find a way to display a prompt() dialog to ask the user for a value, in a way that prevents him from clicking anywhere else until he enters a value and accepts or cancels (meaning, EXACTLY how it works with Javascript).

My problem is, I just can't find a way to do this with the Chrome Platform APIs (note that prompt(), alert() and confirm() can't be used in packaged apps). I already checked questions similar to mine and they all point to the Google App Script documentation, which doesn't work for Chrome Apps.

The only "solution" that I've really found is making a new window, enabling singleton so that it can only be an instance of it and displaying a form there, getting the value when the user accepts(I haven't really finished that last part, I need a way to check when the window is being closed by a button). Still, this is kind of a lot for a simple dialog.

Is there a simple way to do this that I'm missing or is the "intended" way to do this to use multiple windows?

Upvotes: 3

Views: 5861

Answers (1)

Rob W
Rob W

Reputation: 349142

window.prompt has two features:

  1. It requests input from the user.
  2. It does this in a synchronous way, i.e. execution of JavaScript in your page is suspended until prompt() returns.

The first feature can be emulated, but the second feature cannot. So, you will be able to get user input, but only in an asynchronous way. There are two ways to prompt the user for input:

  1. In a popup.
  2. In a lightbox.

A lightbox is similar to a popup, except that it's embedded in the page itself. All implementations of a lightbox involve at least two containers:

  1. A div that covers the whole page, so that the user cannot click on anything else. (CSS: position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;)
  2. Other HTML elements that together resemble a dialog (input fields, buttons).

There are plenty of existing UI libraries to show an inline dialog, e.g. jQuery UI.

Upvotes: 4

Related Questions