Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Creating a masked popup in JavaScript

 
Lila Fowler
Ranch Hand
Posts: 85
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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: 85
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It should just be

 
Lila Fowler
Ranch Hand
Posts: 85
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.)
 
Lila Fowler
Ranch Hand
Posts: 85
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
[Thumbnail for dialogs.jpg]
Dialogs
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 85
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65118
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 85
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic