Another jQuery UI issue

Report · Dec 13, 2018

Hello, all,

Same project as my earlier post about jQuery UI, same section of code. But a different problem.

I decided that I wanted to be tricky about opening the dialogs. I wanted to check for the existence of a dialog, first.

IF there is no dialog, immediately open one.

ELSE, close the currently open one, and open the new one in it's place. My logic suggested that since .dialog("close") doesn't have a callback, I'll have to use setTimeout() to delay opening the second dialog. I don't want to have both of them open at the same time, and they use the same z-index, so closing the first then delaying the open of the second seems (to me) logical.

But it isn't co-operating with me.

If there are no dialogs open and I click the top button, this alerts "false" and immediately opens the first dialog. If I click the second button without closing the first, it alerts "true", closes the first dialog, then opens the second after the first is gone. From this point, if I click the first button, again, it alerts "false" and opens the second dialog at the bottom of the page. The first dialog will never detect the second dialog.

<div class="rmh button"><a href="javascript:void(0);" title="Report an Event" id="rmn_rae">Report an Event</a></div>
<div class="rmh button"><a href="javascript:void(0);" title="Update Contacts" id="rmn_uc">Update Contacts</a></div>
<div id="dialog1" title="Report An Event" class="dialog">
    <p>This is the first dialog.  This is just placement text.  Whoa.</p>
</div>
<div id="dialog2" title="Update Contacts" class="dialog">
  <p>This is the second dialog.  It's not closing the first dialog (if open) before opening when I click the button.  Joy.</p>
</div>
<script>
$(document).ready(function(){
    const rae = $('#rmn_rae'), uc = $('#rmn_uc');
    var isOpen;
    $(".dialog").dialog({
      resizable: false,
      autoOpen: false,
      width: 800,
      height: 500,
      show: {
        effect: "explode",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      }
    });
    rae.on('click',function(){
        isOpen = $(".dialog").dialog("isOpen"); alert(isOpen);
        switch(isOpen){
            case true:
                $(".dialog").dialog("close");
                setTimeout(function(){
                    $("#dialog1").dialog("open");
                    },1200);
            break;
            default:
                $("#dialog1").dialog("open");
            break;
            }
        });
    uc.on('click',function(){
        isOpen = $(".dialog").dialog("isOpen"); alert(isOpen);
        switch(isOpen){
            case true:
                $(".dialog").dialog("close");
                setTimeout(function(){$("#dialog2").dialog("open");},1200);
            break;
            default:
                $("#dialog2").dialog("open");
            break;
            }
        });
});
</script>

What could I be missing, now??

V/r,

^ _ ^

Report · Dec 13, 2018

I dont know how UI works BUT its only grabbing the first instance of - class="dialog" to check.

If you click on 'Report an Event' once the page has loaded - 'false' is returned which is correct - First dialog then comes onto the screen - Click on 'Report an Event' again - 'true' is returned which is correct

However if you reorder the divs so dialog1 is after dialog2 - true isnt returned - false is returned on the second click because the code is grabing 'dialog' of the first div, in this case dialog2

If that makes any sense.

Report · Dec 13, 2018

I hear what you're saying, but I don't understand. I thought that $(".dialog") would get ALL elements with the class "dialog". It certainly works as far as closing all dialogs with the "dialog" class. But it only detects ONE div with the dialog class when testing to see if a dialog is opened??

V/r,

^ _ ^

Report · Dec 13, 2018

The following code alerts "2": alert($(".dialog").length);

So, it will close both if both are opened (I tried that before I started working on closing all before opening another), and it detects a length of 2 (there are two divs with "dialog" class name), but detecting if either is opened, it will only do one?

V/r,

^ _ ^

Report · Dec 13, 2018

Unfortunatley I don't know enough about the jQuery UI workflow to be able to identify the issue of why only the first instance of the class seems to be being checked.

Report · Dec 13, 2018

I guess I'll just have to check individually.

No, waitaminnit. I can use .map to check for whether or not one is opened.

I'll give that a shot and report back.. next week.. I'm getting ready for a Chicago weekend.

V/r,

^ _ ^

Report · Dec 13, 2018

WolfShade wrote
I guess I'll just have to check individually.
No, waitaminnit. I can use .map to check for whether or not one is opened.
I'll give that a shot and report back.. next week.. I'm getting ready for a Chicago weekend.
V/r,
^ _ ^

Ok no problem. Enjoy your weekend.

Report · Dec 13, 2018

I'm not sure to quite understand your problemn, so if I'm beside your point, please, never mind,

if not,

have you try something that way... (caution, I have change your id name for algorythm purpose)

<!doctype html>

<html>

<head>

<title>Swap Dialogs</title>

</head>

<body>

<div><a href="#" id="rmn_one">Dialog One</a></div>

<div><a href="#" id="rmn_two">Dialog Two</a></div>

var isOpen=null;

function managedialog(){

var that = this.id

if (that !== isOpen) {

if (!!isOpen) closeDialog()

isOpen = that

openDialog()

}

return false;

}

function closeDialog(){

var dialogID_ToBeClosed = 'dialog_' + isOpen

console.log('closing : ',dialogID_ToBeClosed)

}

function openDialog() {

var dialogID_ToBeOpened = 'dialog_' + isOpen

console.log('opening : ',dialogID_ToBeOpened)

}

$(document).ready(function(){

$('#rmn_one,#rmn_two').on('click',managedialog)

});

</script>

</body>

</html>

Report · Dec 14, 2018

I assume WolfShade wants to use the jQuery UI library and workflow being used for a reason rather than the standard jQuery library otherwse it would be simple to just show/hide the required dialog box.

Report · Dec 14, 2018

I never thought otherwise... and the script is precisely adapted to use jQuery UI

Report · Dec 14, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
I never thought otherwise... and the script is precisely adapted to use jQuery UI

What does the code you posted meant to do because at the moment it doesnt appear to do anything? I assume you have tested it?

Report · Dec 14, 2018

as I know that Wolfshade knows how to use jQueryUI I've just focus on the swapping mecanism

Report · Dec 14, 2018

and as the swapping mecanism is clear, one can have more than two dialog box if needed

Report · Dec 14, 2018

here is a fully fonctionnal test, if you need

Swap Dialogs

Report · Dec 14, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
here is a fully fonctionnal test, if you need
Swap Dialogs

Thats more useful.

Report · Dec 14, 2018

osgood_ a écrit
Thats more useful.

I did nothing more than adding the opening and closing appropriate code from jqueryUI dialogs (code that can be copy/pasted from jqueryUI demo

again, for what I think the more usefull was to focus on the swaping mecanism, and this mecanism allows you to pilot as many dialogs as you need just by adding them to the HTML

Report · Dec 14, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
osgood_ a écrit
Thats more useful.
I did nothing more than adding the opening and closing appropriate code from jqueryUI dialogs (code that can be copy/pasted from jqueryUI demo
again, for what I think the more usefull was to focus on the swaping mecanism, and this mecanism allows you to pilot as many dialogs as you need just by adding them to the HTML

Its useful to see the whole code in action because without it the part where its just testing in the console is quite useless to most who might just happen to come across it. Its better, in my opinion, to show the whole concept working and then let anyone that needs to deconstruct or maybe find a situation where they can use/adapt it for their own purposes if required.

To be honest I have very little knowledge of jQuery UI and couldnt tell you what it actually does without any researching. I think the only time I've used it is when introducing a date-picker. Its not mentioned that much in this forum.

Report · Dec 14, 2018

well the first mecanism (without any jQueryUI instructions) is just done to work with any libs that you want... it is only based on jQuery and not plain vanilla, just because I knew that Wolfshade was expecting to drive throught jQueryUI... so jQuery was a possible way to go

but again, the mecanism just call an openDialog and an closeDialog function, so it helps to swap in between two states and from there, in both of those functions, one can use what ever code or libs that we like

Report · Dec 14, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
as I know that Wolfshade knows how to use jQueryUI I've just focus on the swapping mecanism

So it just checks in the console which dialog is opened/closed - its not actually a working example of what is meant to happen visually.

Report · Dec 17, 2018

I think I have a solution. It's not ideal, but it is working as expected.

<div class="rmh button"><a href="javascript:void(0);" title="Report an Event" id="rmn_rae">Report an Event</a></div>
<div class="rmh button"><a href="javascript:void(0);" title="Update Contacts" id="rmn_uc">Update Contacts</a></div>
<div id="dialog1" title="Report An Event" class="dialog">
    <p>This is the first dialog.  This is just placement text.  Whoa.</p>
</div>
<div id="dialog2" title="Update Contacts" class="dialog">
  <p>This is the second dialog.  It's not closing the first dialog (if open) before opening when I click the button.  Joy.</p>
</div>
<script>
$(document).ready(function(){
    const rae = $('#rmn_rae'), uc = $('#rmn_uc');
    var isOpen;
    $(".dialog").dialog({
      resizable: false,
      autoOpen: false,
      width: 800,
      height: 500,
      modal: false,
      show: {
        effect: "explode",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      }
    });
    function isDialogOpen(){
        var thisOpen = false;
        $(".dialog").each(function(){
            if($(this).dialog("isOpen")){thisOpen = true;}
            });
        return thisOpen;
        }
    rae.on('click',function(){
        isOpen = isDialogOpen();
        switch(isOpen){
            case true:
                $(".dialog").dialog("close");
                setTimeout(function(){
                    $("#dialog1").dialog("open");
                    },501);
            break;
            default:
                $("#dialog1").dialog("open");
            break;
            }
        });
    uc.on('click',function(){
        isOpen = isDialogOpen();
        switch(isOpen){
            case true:
                $(".dialog").dialog("close");
                setTimeout(function(){
                    $("#dialog2").dialog("open");
                    },501);
            break;
            default:
                $("#dialog2").dialog("open");
            break;
            }
        });
});
</script>

V/r,

^ _ ^

PS. I just realized that I could have made one function for both buttons, and saved some code.. but I'm too dang lazy to re-code it..

Report · Dec 17, 2018

but did you try the solution that I propose you ?

Report · Dec 17, 2018

just in case the code is there

Swap Dialogs

Report · Dec 17, 2018

Sorry, Birnou, but I was away from work, Friday (Chicago weekend), and didn't even look at this thread until after I had worked with it, today. Apologies.

V/r,

^ _ ^

Report · Dec 17, 2018

no problem, dont worries,

having observed your code, I think that the solution I propose is less subject to artifact or forks, and especially it remains more object oriented, bringing more flexibility to evolution and/or maintenance,

after it's free to you...

have apleasant day

Report · Dec 18, 2018

WolfShade wrote
I just realized that I could have made one function for both buttons, and saved some code.. but I'm too dang lazy to re-code it..

I LIED! I LIED! I lied.. I'm not too lazy. I just did it.

For anyone interested:

            <div class="rmh button"><a href="javascript:void(0);" title="Report an Event" id="rmn_rae" class="dialog_btn">Report an Event</a></div>
            <div class="rmh button"><a href="javascript:void(0);" title="Update Contacts" id="rmn_uc" class="dialog_btn">Update Contacts</a></div>
            <div id="dialog1" title="Report An Event" class="dialog">
                <p>This is the first dialog.  This is just placement text.  Whoa.</p>
            </div>
            <div id="dialog2" title="Update Contacts" class="dialog">
              <p>This is the second dialog.  It's not closing the first dialog (if open) before opening when I click the button.  Joy.</p>
            </div>
            <script>
            $(document).ready(function(){
                var isOpen = false, dialogOpen = false;
                $(".dialog").dialog({
                    resizable: false,
                    autoOpen: false,
                    width: 800,
                    height: 500,
                    modal: false,
                    show: {
                        effect: "explode",
                        duration: 500
                        },
                    hide: {
                        effect: "explode",
                        duration: 500
                        }
                    });
                function isDialogOpen(){
                    dialogOpen = false;
                    $(".dialog").each(function(){
                        if($(this).dialog("isOpen")){dialogOpen = true;}
                        });
                    return dialogOpen;
                    }
                $(".dialog_btn").on('click',function(){
                    var thisID = $(this).attr('id'), isOpen = isDialogOpen();
                    switch(thisID){
                        case "rmn_rae":
                            thisID = "dialog1";
                        break;
                        case "rmn_uc":
                            thisID = "dialog2";
                        break;
                        }
                    switch(isOpen){
                        case true:
                            $(".dialog").dialog("close");
                            setTimeout(function(){$("#" + thisID).dialog("open");},501);
                        break;
                        default:
                            $("#" + thisID).dialog("open");
                        break;
                        }
                    });
            });
            </script>

V/r,

^ _ ^

Another jQuery UI issue

1 Correct answer