File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Creating a masked popup in JavaScript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Creating a masked popup in JavaScript" Watch "Creating a masked popup in JavaScript" New topic
Author

Creating a masked popup in JavaScript

Lila Fowler
Ranch Hand

Joined: Jul 31, 2009
Posts: 84
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


Courage is not the absence of fear but rather the judgment that something is more important then fear. ~ Ambrose Redmond
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jul 31, 2009
Posts: 84
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



Any ideas?

Thanks
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
It should just be

Lila Fowler
Ranch Hand

Joined: Jul 31, 2009
Posts: 84
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
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61196
    
  66

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] [Bear's FrontMan] [About Bear] [Books by Bear]
Lila Fowler
Ranch Hand

Joined: Jul 31, 2009
Posts: 84
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.



[Thumbnail for dialogs.jpg]

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61196
    
  66

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.
Lila Fowler
Ranch Hand

Joined: Jul 31, 2009
Posts: 84
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
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61196
    
  66

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?
Lila Fowler
Ranch Hand

Joined: Jul 31, 2009
Posts: 84
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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Creating a masked popup in JavaScript