CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Akhilesh B Chandran
Akhilesh B Chandran

Reputation: 6608

Alternative to prompt() in JavaScript

Here's the scenario. I have some JavaScript code that would be generated on the fly. So, instead of using the prompt() which opens up an inputbox for reading userinput, I made a custom element. Because I can style my custom inputbox rather than using the normal one.

So, the function to show the custom inputbox is something like, show_input()

And this code generated on the fly, is executed at the end using eval(). So in code, after calling that show_input() function, the program is supposed to wait until the user enters the value and presses the button(the button in my custom made input form). And there would be more than one calls to this function in the generated code.

I am not sure how to find a solution to this. That is, to make it behave just like the prompt() halting the entire execution of the code.

What I have tried is, using a boolean flag which would be set when user enter the value and presses the button, in our custom input box. So, when my show_input() is called, it would show the custom input box and then enters into an infinite loop which would halt only when this boolean flag in set. But this freezes the webpage making it not responding. So, that's not a great solution.

Is there any way to mimic the functionality of how the prompt() function works. I mean, pause the entire page until the user presses the button?

setTimeout() function wouldn't be a good choice in my case. Because the reason is, my code generated would look something like this:

statement1;
statement2;

show_input(); //call the function to show my custom inputbox

statement3;

show_input();

statement4;
statement5;
// etc...

So, after statement2, the function call is for displaying the custom input box asking the user to enter the value and press a button. Only after pressing this button, it should goto statement3. Till that time, it should wait for the user to press the button in my custom input box.

I am using jQuery and the button had a click event added to it.

The above code generated at runtime, is executed using eval()

Any ideas would be highly appreciated. Thank you

Upvotes: 2

Views: 3308

Answers (4)

Grim
Grim

Reputation: 1648

The execution model of javascript does not allow what you are trying to achieve, since there is no way to "block" execution of a script waiting for input from the DOM. Like you noted with your loop attempt, the page is frozen until the script end running, and only then normal event handling is resumed.

So instead create a callback function containing the statements you want executed after the user input, and have your input system call it. example:

// statement 1 and 2 here

var callback = function(value) {
    // statement 3 here
}

show_input(callback);

Then inside show_input bind the user confirmation to a function that retrieves the value and then calls the callback function given to it using said value. example (using jquery syntax for brevity, but that's not strictly necessary to use it):

function show_input(callback) {
   // create the input form
   $(confirm_button).click(function() {
      callback($(input).value());
   });

This can of course be nested to any level as needed. When nesting, care must be taken if reusing existing widgets (as opposed to creating new ones) that the previous callback events are unbound before binding the new ones - if needed, you could also keep a reference to the event handler in order to remove it explicitly, but for most cases unbinding all events should suffice.

See an example fiddle: http://jsfiddle.net/YTcy8/

Upvotes: 2

vdua
vdua

Reputation: 1331

We have a similar situation where we had to stop the script execution for user input, we couldn't find any solution after searching for almost 2 3 months. After that we gave up the idea since it isn't possible to do that.

However the approach we took was as follows

statement 1
statement 2
showInput(function() { 
    statement3;
    showInput( function() {
               statement4;
               statement5;
             })   
       })

I do not have any solution for your problem except this one. If you find a solution other than this please provide the same. I have found many people who are blocked at the same situation

Upvotes: 0

Barney
Barney

Reputation: 16466

I found your scenario difficult to follow but assume the difficulty you're facing is with binding user interaction to generated code. To try and get a bit clearer on the issues you're facing, would the following work? If not, why not?

$('#thebutton').on('click', statement3);

Here's a fiddle with an abstraction of the whole thing — use the fork button to create your own modifications if you want to extend or correct it.

Upvotes: 1

jguilhermeam
jguilhermeam

Reputation: 121

You need to detect the click event on the button of your input box. You can use onclick to trigger a function that detects if the user filled the input, if the input is filled then you continue to do what you want. You can also use a overlay box to put the input and button

Upvotes: 1

Related Questions