Legend

Answered

Another jQuery UI issue

Forum|Forum|7 years ago
December 13, 2018
2 replies
1159 views

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,

^ _ ^

This topic has been closed for replies.

Correct answer WolfShade

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,

^ _ ^

WolfShadeAuthor

Legend

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..

B i r n o u

Legend

but did you try the solution that I propose you ?

B i r n o u

Legend

just in case the code is there

Swap Dialogs

osgood_

Legend

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.

WolfShadeAuthor

Legend

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,

^ _ ^

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded