Avatar of bassman592
bassman592
Flag for United States of America asked on

How to persist javascript dialog box

I am not very comfortable with javascript, but I am working with a web site where I would like to make a small change, if I can figure out how to do it.

There is a page where users can view some codes associated with clients. On this page, users can - among other things - add new codes. There is an "Add/Edit" button that, when pressed,  allows the user to add new codes. When the "Add/Edit" button is pressed, a dialog box pops up containing various controls that allow the user to configure and add a code. The issue I am trying to change is that, when this dialog box has been displayed, if the user for some reason clicks outside the dialog box, it immediately closes losing any configuration information the user may have entered. If they still want to add a code, they click the "Add/Edit" button again and start over. I want to change it so that the dialog box does NOT close if the user clicks outside the dialog box, but only closes when the user presses either the "Cancel" or the "Save" button. Also, the dialog box should retain any information the user has already entered.


I have attached screenshots of the main form (screen1) and the dialog box (screen2).

I don't need exact code for this particular application, I just need some representative code to see how this could be done in javascript. I know in Windows, there are various modes that can be specified when displaying a window, so maybe it is as simple as that. But maybe not.
Screen1.JPG
Screen2.JPG
JavaScript

Avatar of undefined
Last Comment
bassman592

8/22/2022 - Mon
Julian Hansen

There are different ways of solving this depending on how the dialog is being created and destroyed.

A . In some cases a dialog is already on the page - just hidden - when you close it - it hides, when you open it it shows - in this situation you have to manually clear the fields if you want to see a blank form. If this is the setup then you would just need to intercept the clearing bit and stop it from doing that (unlikely this is the one being used though)

B. In other cases the dialog is recreated from scratch - this means no clearing of fields on close - they are destroyed when the dialog is destroyed. In this situation you would need to find out where the click handler is pointing to close the form - get into that code and before the dialog is destroyed pull the data out of it and save it to localStorage or similar.

C. If the application has been built with a framework like Angular or library like React then the form would / could be linked to a model - not sure if this is the case for you (probably not) so not going to go much further on it.

The most likely scenario is B - but to tell you how to solve this is not really feasible with out more information on the code that is driving the dialog.
bassman592

ASKER
Ok, so there's no sort of universal setting for opening the dialog window that says basically "keep this open even if it loses focus"?

I will see if I can locate and post the code that handles it. I know it uses a common library module, so I'll have to do some tracking down.
lenamtl

Hi,

I would not use popup for this as this can be hard to use on mobile device and can cause several issue especialy when using with a table.

I do prefer to use seperate page for form and add the buttons edit/delete/view directly in a Tools column which is more userfriendly.

But if I have to do it on the same page
I would use Datatables https://datatables.net/ 
with their editor https://editor.datatables.net/examples/index

This allow to use inline, buble, popup form ect.. and it use localStorage / sessionStorage already....

Datatables have several great features like export, filter, and is responsible so can display +20 columns and it will be visible on smaller device.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
bassman592

ASKER
Thank you lenamtl, I will definitely keep that in mind if I'm asked to re-design the pages, but at the moment, I have a much more limited mission. I just need to persist the add/edit dialog box. One thing I can tell you, this system is not meant for mobile, and probably never will be.

Thank you.
lenamtl

Here some suggestions:

Maybe you can use unbeforeunload to alert to user if it try to quit the popup or the page...

I'm using these scripts that are watching fields changes and alert if the user quit page.
https://github.com/rubentd/dirrty
https://github.com/simontaite/jquery.dirty

You can adapt the code so it can watch any kind of event and use on any element (click on a tab, close the modal, click on a button ect..) and ignore some event  / element too.

That will alert the user not preventing to close the modal.
But you can enable the close button or function and enable it, under some conditions with these script so maybe this can do the job.
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
bassman592

ASKER
I have since found out that the code I'm working with actually does use bootstrap. I have never heard of it, but there is apparently a "backdrop" property that possibly could be used to do what I want. I will show some code in a bit.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

Bootstrap usually works off pre-constructed dialog templates - which means (unless you specifically code around it) the data is retained.

You definitely need to be looking (and showing us) the code that drives the dialog - we can't make any statements about what to do or not do without seeing the implementation.
bassman592

ASKER
I have uploaded 3 files:

index.cfm - a coldfusion page - I'm not sure this is relevant, but it may be the main page

lookupcodes.js - the main page for the lookup codes page - I believe the "dialog box" is called form here

bootstrap-dialog.min.js - It looks to me like this just contains one huge function, but I'm not familiar with bootstrap. This may be the place where I need to modify the display to use the backdrop=static property. If so, then my concern would be that this is probably used by every "dialog box" in the system - I don't know if I want to change the behavior of ALL of them.

I think these are the relevant files, but if you think more is required, let me know.
LookupCodes.zip
leakim971

test page : https://jsfiddle.net/ayurkcmv/

imagine two layers
first layer, in the background, your current page
second layer host the dialog box (let say 320px/200px with OK, CANCEL, CONFIRM, the fields and buttons you want on it)
the second layer is over(front of) the first layer and 100% width and height
so the user can't click on the first layer until he click on a button of the dialog box

you already have Bootstrap 3.1 in the box
https://getbootstrap.com/docs/4.0/components/modal/

if you want to prevent people to close the dialog until they click on a button, set the backdrop option to "static"
https://getbootstrap.com/docs/4.0/components/modal/#options
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
bassman592

ASKER
Thank you. I will look at bootstrap further and the backdrop property in particular. I appreciate your input.