jQuery UI "dialog" issue

Hello, all,

I’m working on a project where the client wants to offer two forms for users to fill out, each to appear in a modal or dialog (I chose dialog). I’ve got them opening just fine, closing just fine, but since they both occupy the same space (and use the same z-index) on the page I want to detect if one is open before going any further.

So, the code I have will work if the first form is already opened; the second form detects that the first one is open and will close it before opening the second form.

But the first form always detects “false”, regardless of whether the second form is open or not.

My code:

<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
      }
    });
	rae.on('click',function(){
		isOpen = $(".dialog").dialog("isOpen"); alert(isOpen);
		switch(isOpen){
			case true:
				$(".dialog").dialog("close");
				setTimeout(function(){
					$("#dialog1").dialog("open");
					},501);
			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");
					},501);
			break;
			default:
				$("#dialog2").dialog("open");
			break;
			}
		});
});
</script>

What am I missing, here? The logic seems solid, but FireFox isn’t co-operating. I’ll try it in IE after I get FF working with it.

Any suggestions?

V/r,

:wolf:

$(.dialog) is a selector with 2 members, so the behavior of a group’s status ($(".dialog").dialog("isOpen")) is at best ambiguous, and probably misleading you.

Test .each() element of the dialog selector; if you find a True, execute your True switch case and Return. After the Each, execute the Default switch case.

Alternatively, simply check $(“#dialog1”) isOpen || $(“#dialog2”) isOpen, if you know you’re sticking with 2 dialogs.

1 Like

Even when I know for a fact that there will never be more or fewer elements that need whatever kind of processing or anything, I always try to make it work in a dynamic fashion, because you just never know. (Especially around HERE.)

Here’s what I wound up doing, instead. I realise, now, that I could have simplified it and used less code; but if I’m being honest, I’m just too damn lazy to change it. :slight_smile:

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

^ _ ^

I LIED! I lied… I changed it. :slight_smile: If anyone is 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">
				<h1>Report An Event</h1>
				<p>This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  This is the first dialog.  This is just placement text.  </p>
			</div>
			<div id="dialog2" title="Update Contacts" class="dialog">
				<h1>Update Contacts</h1>
			  <p>This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  This is the second dialog.  Lorem ipsum, carpe diem, and cogito ergo dim sum.  Vini, vidi, velcro.  </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,

:wolf:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.