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
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
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.
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.
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.
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.
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.
Thank you.
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
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.
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
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
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
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
ASKER
Thank you. I will look at bootstrap further and the backdrop property in particular. I appreciate your input.
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.