Forum:

HTML Pages with CSS and JavaScript

Creating a masked popup in JavaScript

Ranch Hand

Posts: 90

posted 6 years ago

Hey Guys,

I'm trying to create a popup from a .js page where the field content is hidden/masked with special characters eg: *.
Security is not an issue, so I am not concerned about view source. I can mask a field in html using the password type,
but I have to have a popup, and it has to be run in the js page not from the html.

Any ideas on how I can solve this issue?

Here is the javascript test code:

Is it possible to create a simple custom pop up/mini jFrame like in std java?
Thanks

Everything has a price love, but somethings will cost you something that money cannot buy.

Eric Pascarello

author
Rancher

Posts: 15385

posted 6 years ago

JavaScript does not have a prompt that allows you to do that.

You would have to build it with JavaScript to pop up a div with the elements inside of it. If you use something like jQuery UI Dialog, it is not hard to do.

Eric

Lila Fowler

Ranch Hand

Posts: 90

posted 6 years ago

Thanks Eric, I used your JQuery suggestion (took me a while to figure out how it works

), but i'm still confused as to how to call the popup from my js file without have any onclick method?

//js method that has to display pop up

And here is my mini html file I created to test with, at the moment the
pop up is loaded onClick with a mock button as its the only way I can get
the pop up to display. (changing auto open does nada on my pc)

//mini html screen only containing popup

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Test Page</title>
		<link type="text/css" href="css/start/jquery-ui-1.8.16.testcustom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.6.2.testmin.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.testmin.js"></script>
		<script type="text/javascript"></script>
	
		<script>
		$(function() 
		{
			var	hidden = $( "#hidden" ),
			allFields = $( [] ).add( hidden ),
			tips = $( ".validateTips" );

$( "#dialog-form" ).dialog(
			{
				autoOpen: false,
				height: 500,
				width: 350,
				//modal: true,
				buttons: 
				{
					"Ok": function() 
					{
						allFields.removeClass( "ui-state-error" );
						var approveHidden = hidden.val()
						if (hidden.val() != "")
						{
							if(hidden.val() == "yes")
							{
								alert("I like hidden fields.");
								$( this ).dialog( "close" );
							}
							else
							{
								alert("Are you sure you dont like hidden fields?");
							}
						}
						else
						{
							alert("No opinion entered.");
						}
					},
				
					Cancel: function() 
					{
						$( this ).dialog( "close" );
					}
				},
			
				close: function() 
				{
					allFields.val( "" ).removeClass( "ui-state-error" );
				}
			});

$( "#create-user" )
			.button()
			.click(function() 
			{
				$( "#dialog-form" ).dialog( "open" );
			});
		});
		</script>
	</head>
	<body>
		<div class="demo">
			<div id="dialog-form" title="Hidden Opinions">
				<p class="validateTips">Do you like hidden fields? yes/no.</p>
				<form>
					<fieldset>
						<label for="hidden">Opinion:</label>
						<input type="password" name="hidden" id="hidden" value="" class="text ui-widget-content ui-corner-all" />
					</fieldset>
				</form>
			</div>
			<button id="create-user">Share Opinion</button>
		</div>
	<body>
</html>

Any ideas?

Thanks

Everything has a price love, but somethings will cost you something that money cannot buy.

Eric Pascarello

author
Rancher

Posts: 15385

posted 6 years ago

It should just be

Lila Fowler

Ranch Hand

Posts: 90

posted 6 years ago

Thanks again Eric

Last question I hope...

So now it gets to my dialog, starts the html portion but keeps going one with the normal js code without waiting
for the html code to finish. I tried using a wait method but it doesn't work. Normally I would use: var xxx = xxx();
to make sure I have the required value I need before the code block can continue, is there something similar for
dialog boxes js side? Or a way to prevent it returning to js before the html is complete?

Thanks

Everything has a price love, but somethings will cost you something that money cannot buy.

Bear Bibeault

Author and ninkuma
Marshal

Posts: 66727

167

I like...

posted 6 years ago

Your description is confusing. HTML "code" doesn't execute so I'm not sure what you mean by that. Do you mean JavaScript code?

In any case, yes, any JavaScript code in the method that opens the dialog will execute. Nothing blocks, waiting for the dialog.

Remember, JavaScript is event driven, so if you want to do something when the dialog closes, you'll need to establish a handler for the dialog close event. (Or the OK button click event, or whatever event will kick off the code you want to execute.)

[Asking smart questions] [About Bear] [Books by Bear]

Lila Fowler

Ranch Hand

Posts: 90

posted 6 years ago

Sorry Bear, I meant that the html is called, but it doesn't wait for the html to finish running before the js continues with what ever code is beneath:

I have OK, Cancel and X methods for the dialog where it will wait html side for an action to happen, but this does not seem to effect the js side.
This is the first time I am using JQuery so I am confused as to how you would implement it js side. Basically I need a jquery version of:

but with hidden characters.

Hope I have explained whats happening better, I'v added a screen shot as-well.

Thanks

//Here I was trying to print out the value in the password/hidden effect field, but gets to the dialog before Ok or Cancel are pressed.

dialogs.jpg

Everything has a price love, but somethings will cost you something that money cannot buy.

Bear Bibeault

Author and ninkuma
Marshal

Posts: 66727

167

I like...

posted 6 years ago

Answer still stands. Anything you want to happen when the dialog closes needs to be placed in an event handler -- not inline with the dialog creation code.

If you look at the documentation of the dialog widget, you will see that there is a close option that lets you easily establish a close handler for the dialog.

[Asking smart questions] [About Bear] [Books by Bear]

Lila Fowler

Ranch Hand

Posts: 90

posted 6 years ago

Thanks Bear, got the code to pick up the OK action by adding code the same as the dialog method:

and although it prints my alert out correctly is till does not do the code that I actually need as in the
html OK function. If I remove the code from the OK function my whole dialog messes up, but if
I leave both in then the if statements don't execute from the js side. //doesn't pick up password because no longer in the html??

So confused already

Any ideas as to what I am doing wrong?
Thanks

Everything has a price love, but somethings will cost you something that money cannot buy.

Bear Bibeault

Author and ninkuma
Marshal

Posts: 66727

167

I like...

posted 6 years ago

That isn't even really valid JavaScript syntax (only accidentally so because you can leave out semi-colons) and is certainly not a valid way to call the dialog function.

What is it you were actually trying to accomplish with that code fragment?

[Asking smart questions] [About Bear] [Books by Bear]

Lila Fowler

Ranch Hand

Posts: 90

posted 6 years ago

Sorry about that, Im am trying to get the custom dialog created with a hidden field (called from js) -- currently working.
Now in the same js method where the alert was called I need to pick up the data entered and used the value in the rest
of the method. -- only working in html, so basically I need the OK function to be working js side not html side.

Thanks

Everything has a price love, but somethings will cost you something that money cannot buy.

The glass is neither half full or half empty. It is too big. But this tiny ad is just right:

Why should you try IntelliJ IDEA ?

https://coderanch.com/wiki/696337/IntelliJ-IDEA

Creating a masked popup in JavaScript

Similar Threads