CrossUI Builder

Posted: **Thu Feb 08, 2024 10:19 am**

Hi, it's me again

I'm encountering an issue where a confirm dialog is being displayed behind a modal dialog component in my CrossUI application.

Here's the scenario:

I display a modal dialog component.
Then, I trigger an "open confirm dialog" event, for example, when a form is modified and a "close dialog" event is triggered.
I confirm the action, and I trigger the "destroy" action on the dialog component. So far, everything is working correctly.

However, when I display the dialog component again (still in modal mode), and repeat the same action to trigger the "open confirm dialog," the problem occurs. The confirm dialog is displayed behind the dialog component. Consequently, I have to move the dialog component to see the confirm dialog behind it.

One possible solution is to modifiy xui framework to completely destroy the main span element that manages the display of this confirm dialog, rather than hiding it in CSS with visibility: hidden and z-index: 0. This way, when it's displayed again, it's recreated, and it's properly layered above all other objects on the page.

The only temporary workaround I've found is to not destroy my dialog component but to hide it instead and make it visible again for the next use. However, this approach poses a problem if I display other dialog components in future pages, as they might overlay subsequent confirm dialog displays.

Thanks

Posted: **Thu Feb 08, 2024 10:00 pm**

The problem is the "CONFIRM" dialog is cached, and your modal dialog is destroyed.
When the modal dialog is destroyed, and you create a new one, pop to the top, it will cover the existing prompt dialog.

You can use code to overcome this:

Code: Select all

        _xui_ui_dialog3_beforeclose:function(profile){
            var ns = this, modal = profile.boxing();
            xui.confirm("title", "content", function(){
                modal.destroy();
            }, function(){
                
            }, null, null, null, null, null, null, true);
            return false
        }

Posted: **Tue Feb 13, 2024 7:07 am**

Thanks for solution.

I tried an alternative that also worked for me. I wanted to save my existings actions
Here is the code generated by CrossUI to manage my UI Dialog window :

Code: Select all

            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"element_form")
                .setName("element_form")
                .setDefaultFocus(true)
                .setLocked(true)
                .setLeft("9.142857142857142em")
                .setTop("5.333333333333333em")
                .setWidth("88.22857142857143em")
                .setHeight("48.60952380952381em")
                .setSelectable(false)
                .setResizer(false)
                .setCaption("Formulaire d'un élément")
                .setMaxBtn(false)
                .setRestoreBtn(false)
                .setModal(true)
                .beforeClose({
                    "return" : "{false}",
                    "actions" : [
                        {
                            "desc" : "fermeture fenêtre si rien n'est modifé dans le form",
                            "type" : "control",
                            "target" : "element_form",
                            "args" : [ ],
                            "method" : "destroy",
                            "conditions" : [
                                {
                                    "left" : "{page.element_form.isDirtied()}",
                                    "symbol" : "=",
                                    "right" : "{false}"
                                }
                            ],
                            "return" : false
                        },
                        {
                            "desc" : "on demande si on veut vraiment fermer",
                            "type" : "other",
                            "target" : "msg",
                            "args" : [
                                "Attention ! Des données ont été modifiées",
                                "Etes-vous certain de vouloir fermer le formulaire sans enregistrer ?",

so, I added the extra arguments here, after the two first one :

Code: Select all

                                
                                function(){
                                },
                                function(){
                                },
                                null,
                                null,
                                null,
                                null,
                                null,
                                null,
                                true

I didn't touched the rest of code generated by CrossUI here :

Code: Select all

                                
                            ],
                            "method" : "confirm",
                            "okFlag" : "_confirm_yes",
                            "koFlag" : "_confirm_no",
                            "onOK" : 2,
                            "onKO" : 3
                        },
                        {
                            "desc" : "confirmation par OUI : fermeture fenêtre",
                            "type" : "control",
                            "target" : "element_form",
                            "args" : [ ],
                            "method" : "destroy",
                            "conditions" : [
                                {
                                    "left" : "{temp._confirm_yes}",
                                    "symbol" : "defined",
                                    "right" : ""
                                }
                            ]
                        }
                    ]
                })
            );

I was thinking then that if I had to modify existing action, CrossUI would delete extra arguments, so I tried to modify the textes in first argument, and then, checked code to see, if the added arguments were still there, and it was the case.

So it is perfect for me .

Thanks again

Posted: **Wed Feb 14, 2024 8:59 am**

I have one question about Confirm Dialog and Alert. Is there a way to show them in modal mode ?

Posted: **Thu Feb 15, 2024 4:40 pm**

It's a modal mode, simulated

CrossUI Builder

Issue with Confirm Dialog Overlaying Modal Dialog Component

Issue with Confirm Dialog Overlaying Modal Dialog Component

Re: Issue with Confirm Dialog Overlaying Modal Dialog Component

Re: Issue with Confirm Dialog Overlaying Modal Dialog Component

Re: Issue with Confirm Dialog Overlaying Modal Dialog Component

Re: Issue with Confirm Dialog Overlaying Modal Dialog Component