SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: custom prompt

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    custom prompt

    hi, all!

    I can't seem to find this anywhere...

    is there a way to replicate window.prompt() behavior/ functionality inside a custom function?
    I'm trying to program a better-looking prompt box.
    I found many scripts around, but all they do is fire another function when a value is specified and the 'Ok' button is pressed.

    I don't want to have to specify a callback function, but rather want js to "freeze" execution until a value is provided, just like it happens when one uses window.prompt:

    Code JavaScript:
    var myName = prompt('What is your name?');
    alert(myName);

    the code above works.

    now, with the scripts that I found online, I gotta do:
    Code JavaScript:
    function handlePromptResult(val) {
    alert('Your name is: ' + val);
    }
    SomeLibrary.customPrompt('What is your name?', handlePromptResult);

    I would like to be able to do:

    Code JavaScript:
    var myName = MyLibrary.customPrompt('What is your name?');
    alert('Your name is: ' + myName);

    Is there any way to achieve this?

    thanks!

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another option is to have a div (hidden on page load) that is displayed whenever a confirmation is required before taking a particular action.

    The div can be styled to whatever you like and can have 2 buttons like OK and CANCEL.

    The function that is called to display this "confirmation" div can then disable any other buttons and links on the page until either OK or CANCEL is clicked in the div.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by trapach View Post
    I'm trying to program a better-looking prompt box.
    I found many scripts around, but all they do is fire another function when a value is specified and the 'Ok' button is pressed.

    I don't want to have to specify a callback function, but rather want js to "freeze" execution until a value is provided,
    The only way to do it is to place a transparent or semi-transparent image over the page content with only your "prompt" box in front of it so that only the buttons there that call new functions are accessible. You can't actually freeze the execution (and some browsers have changed the prompt box to work this way as well).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You can't actually freeze the execution
    Just out of curiosity, if on page load you put all the button and link objects into arrays and set their disabled property to false, why would that not freeze (or stop) the execution of the functions those buttons and links called?

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, it's not that I want to freeze execution meaning that I want the window to be modal (e.g. the user can't do anything until he is done with my window). that's as easy as adding an overlay behind the window.

    what I want is for avascript to wait until the user has inserted and confirmed (by pressing on 'Ok') a value before continuing with the script, so that my_var is not undefined. please see the following example:

    Code JavaScript:
    my_var = prompt('What do you want my_var to be?');
    alert('my var is: ' + my_var);

    the alert is not executed until the user is done with the prompt.
    I want to replicate that behavior, but with a custom prompt.

    is there a way to do this?

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, one way is to disable all the other buttons, links and any other clickable elements that call a js function when the div prompt for a value is displayed.

    When the user clicks the ok button on the div prompt, check if the value is valid and if it is, re-enable all the buttons, links etc.

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,184
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    here is an example of how a custom prompt can be created with an internal event system to alert or do anything else after the submit button has been pressed.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Custom Prompt w/ Event Handling</title>
    		<script type="text/javascript">
    
    			// custom prompt class
    			function MyPrompt(prompt) {
    				
    				// object reference for "private methods"
    				var _me = this;
    	
    				// prompt container node
    				var _prompt;
    	
    				// prompt input node
    				var _input;
    	
    				// prompt submit button node
    				var _submit
    	
    				// prompt event handlers
    				var _events = {
    					submit:[]
    				};
    				
    				_init();
    				function _init() {
    	
    					// Get prompt container node
    					_prompt = document.getElementById(prompt);
    		
    					// Get input node
    					_input = document.getElementById('prompt-info');	
    		
    					// Get submit node
    					_submit = document.getElementById('prompt-submit');
    		
    					// attach submit handler
    					_submit['onclick'] = _onSubmit;
    		
    				}
    	
    				// display the prompt container
    				this.prompt = function() {
    					_prompt.style.display = 'block';
    				}
    	
    				// Get the input value
    				this.getInputValue = function() {
    					return _input.value;
    				}
    	
    				// Attach event handler
    				this.addEventHandler = function(evt,handler) {
    					// push handler onto event stack
    					_events[evt].push(handler);
    				}
    	
    				// on submit action
    				function _onSubmit(evt) {
    					
    					// ie bubble and cancel default action
    					evt.cancelBubble = true;
    					evt.returnValue = false;
    					
    					// ff bubble and cancel default action
    					if (evt.stopPropagation) {
    						evt.stopPropagation();
    						evt.preventDefault();
    					}
    				
    					// hide the prompt window
    					_prompt.style.display = 'none';
    					
    					// fire off submit event
    					_fire('submit');
    	
    				}
    	
    				// fire prompt event
    				function _fire(evt) {
    					// call event handlers
    					for(var i=0;i < _events[evt].length;i++) {
    						_events[evt][i]({target:_me,event:evt});
    					}
    				}
    	
    			}
    		</script>
    		<script type="text/javascript">
    			
    			window['onload'] = function() {
    			
    				// create prompt
    				var prompt = new MyPrompt('prompt');
    				
    				// prompt submit handler
    				prompt.addEventHandler('submit',function(evt) {
    					alert(evt.target.getInputValue());
    				});
    				
    				// prompt user for input
    				prompt.prompt();
    				
    			};
    			
    		</script>
    	</head>
    	<body>
    		<div id="prompt" style="display: none;">
    			<form>
    				<fieldset>
    					<legend>Example</legend>
    					<div>
    						<label for="prompt-info">Input</label>
    						<input type="text" name="info" value="" id="prompt-info">
    					</div>
    					<input type="submit" name="submit" value="submit" id="prompt-submit">
    				</fieldset>
    			</form>
    		</div>
    	</body>
    </html>

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried your script in IE8, FF3.6, Opera 10, safari and chrome.

    It works in all browsers except in IE8 where after entering qwerty in the textbox and clicking submit, the contents of the textbox disappeared and nothing else happened. In the other browsers the standard prompt box appeared with the appropriate prompt message.

    But the OP also said

    I'm trying to program a better-looking prompt box.
    I can't work out how to style the actual pop-up prompt box that your script pops up which is what the OP wants if I understand correctly.

    If it all worked your script would be a keeper for me as well

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,184
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by trapach
    what I want is for avascript to wait until the user has inserted and confirmed (by pressing on 'Ok') a value before continuing with the script, so that my_var is not undefined. please see the following example:
    As for the look, that is besides the the problem. if you can't style the simple html there you obviously don't have a very good grasp of CSS. The JavaScript doesn't even manipulate any of the HTML it just decorates it with a simple prompt box functionality. It doesn't matter what it looks like from a programmatic standpoint once it functions that is for the designer to figure out.

    I didn't test it in IE8, probably has something to do with the event handling though.

    Really, the only thing I was trying to show with my example was the process to develop an internal event handling system so that one could run actions outside of the prompt when submit is clicked.

  10. #10
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    As for the look, that is besides the the problem. if you can't style the simple html there you obviously don't have a very good grasp of CSS. The JavaScript doesn't even manipulate any of the HTML it just decorates it with a simple prompt box functionality.
    I think the OP probably knows how to style the html.

    But I think it's the actual pop up prompt box he/she wants to customise and style.

    I'm trying to program a better-looking prompt box.

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    oddz, thanks a 1000 for the code.

    problem is, it's not solving my problem.
    I'm prolly not succeding at explaining clearly what I'm after and I apologize if that's the case.
    I also appreciate all your help.

    however, I'm looking at something that will replicate exactly window.prompt's behavior.
    I need my script to be able to do exactly this:

    Code JavaScript:
    myName = myCustomPrompt('What is your name?');
    alert('your name is: ' + myName);

    as you might notice, there is no callback function. myCustomPrompt should just return the value the user inserted in a text box.

    with the script I'm looking for, javascript would "freeze" and wait for the user to having done something (either provided a value or cancelled) before continuing with the code, just like it happens with window.prompt.

    when I use window.prompt:
    Code JavaScript:
    var p = window.prompt('What is the value of p?);
    if (p == 'bob') {
    ...
    } else {
    ...
    }
    I can write code that uses 'p' right after my statement, with no callback function or stuff like that, just as if it was a regular operation, because I know that javascript will popup a window, freeze execution until the user is done with the prompt - whether he specified a value or dismissed it, and populate my variable.
    this is what I'm looking after.

    thanks again for all your help, even though I'm starting to think there's no way to achieve this.

    thanks!!!

  12. #12
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,184
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    The reason I showed you how to accomplish it with an event system is because that is not possible. You need to have an event system to copy that behavior outside of the custom prompt. Which really just means you need to change the work flow around a little.

    pseudo code:
    Code JAVASCRIPT:
    prompt.addEventHandler('submit',function(evt) {
     
    	if (evt.target.getInputValue() == 'bob') {
    		...
    	} else {
    		...
    	}
     
    });

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, I understand.

    I guess I'll use jQuery's or stuff like that.

    thanks for all your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •