Multiple BasicDialog instances on same page

**khnle** · 8 Dec 2006 11:59 AM

Is it possible to have multiple BD instances on the same page? For example, if I have in the HTML:

Code:

<div id='logout-dlg' style='visibility:hidden;overflow:hidden;position:absolute;top:0px;'>
	<div class='ydlg-hd'>Logout</div>
        ...
</div>

<div id='login-dlg' style='visibility:hidden;overflow:hidden;position:absolute;top:0px;'>
	<div class='ydlg-hd'>Login</div>
        ...
</div>

and in the JavaScript file:

Code:

logoutDlg = new YAHOO.ext.BasicDialog("logout-dlg", { modal:true, ... });
						
loginDlg = new YAHOO.ext.BasicDialog("login-dlg", { modal:true, ... });

It would seem like only the first one that appears in the HTML can work correctly while the second dlg even fails to show. Does anyone have any idea? I know it's possible since I have seen wayki.com does it. Please help. Thanks

**Animal** · 8 Dec 2006 12:10 PM

Should work. You're going to have to post up a link.

**alanwilliamson** · 8 Dec 2006 12:13 PM

I have many BasicDialog boxes all working beautifully within the same page.

Make sure you haven't accidentally copy'n'pasted and reused an ID that should be unique between them all. Also be careful you aren't stepping over variables when you create the second dialog instance.

I have wrapped mine in separate objects, so i don't get variable collision.

But as the "Animal" suggested, post the full code so we can see if there is something obvious.

**khnle** · 8 Dec 2006 12:34 PM

Awesome. What a great community :-)

In my HTML:

Code:

<head>	
	<title>Vi and Hai Wedding - December 16, 2006</title>
	<link rel="stylesheet" href="css/mainPage.css" type="text/css" /> 
	<link rel="stylesheet" href="css/formStyles.css" type="text/css" />
	<link rel="stylesheet" href="css/reset-min.css" type="text/css" />
	<link rel="stylesheet" href="css/resizable.css" type="text/css" />
	<link rel="stylesheet" href="css/basic-dialog.css" type="text/css" />
  	
	<script type="text/javascript" src="yui/utilities.js"></script>
	<script type="text/javascript" src="yui-ext/yui-ext.js"></script>
				
	<script type="text/javascript" src="js/wedding.js"></script>       	
    
	<script type="text/javascript">    	
		// <![CDATA[		
		YAHOO.util.Event.on(window, 'load', function() { pragmaticobjects.wedding.init(); });		
		// ]]>
	</script>		
</head>
<body>
...
<div id="login-dlg" style="visibility:hidden;overflow:hidden;position:absolute;top:0px;">
	<div class="ydlg-hd">Guest Login</div>
	<div class="ydlg-bd">
		<div id="logonForm" class="form">
		<form id="signonForm" method="POST">
		<fieldset>
			<legend>Guest Login</legend>
			<p id="login-title" class="message"></p>			
			<br class="clearBoth" />
			<label class="fieldLabel" for="guest_id">Guest Id:</label>
			<input type="text" style="float:left" id="id" name="id" value=""/>
			<br class="clearBoth" />
			<br class="clearBoth" />
	    <label class="fieldLabel" for="password">Password:</label>
			<input type="password" style="float:left" id="password" name="password" value=""/>			
		</fieldset>		
		</form>				
	</div>	
</div>

<div id="logout-dlg" style="visibility:hidden;overflow:hidden;position:absolute;top:0px;">
	<div class="ydlg-hd">Guest Logout</div>
	<div class="ydlg-bd">
		<div id="logoutForm" class="form">
		<form id="signoffForm" method="POST">
		<fieldset>
			<legend>Guest Logout</legend>
			<p id="logout-title" class="message">Please confirm that you want to logout</p>
		</fieldset>
		</form>
	</div>	
</div>
</body>

and in my Javascript file:

Code:

var pragmaticobjects = {};
pragmaticobjects.wedding = {
	$C : Object,
	$D : Object,
	$DEx : Object,
	$E : Object,	
	$  : Object,
	$P : Object,
	active : '',
	localId : '',
	loginDlg : Object,
	logoutDlg : Object,
	init: function() {
		$C = YAHOO.util.Connect;
		$D = YAHOO.util.Dom;
		$DEx = YAHOO.util.Dom.Ex;
		$E = YAHOO.util.Event;
		$  = $D.get;
		$P = pragmaticobjects.wedding;						
		
		logoutDlg = new YAHOO.ext.BasicDialog("logout-dlg", { 
			modal:true, autoTabs:true, width:250, height:150, fixedcenter:false, shadow:true, minWidth:250, minHeight:150, resizable: true
		});
		logoutDlg.hideOnSubmit = false;
		
		logoutDlg.addKeyListener(27, logoutDlg.hide, logoutDlg);
		logoutDlg.addKeyListener([13,10], $P.logout, logoutDlg);
		logoutDlg.addButton('Close', logoutDlg.hide, logoutDlg);
		logoutDlg.addButton('Logout', $P.logout, logoutDlg);
		
		
		loginDlg = new YAHOO.ext.BasicDialog("login-dlg", { 
			modal:true, autoTabs:true, width:400, height:220, fixedcenter:true, shadow:true, minWidth:400, minHeight:220, resizable: true
		});
		loginDlg.hideOnSubmit = false;
		
		loginDlg.addKeyListener(27, loginDlg.hide, loginDlg);
		loginDlg.addKeyListener([13,10], $P.login, loginDlg);
		loginDlg.addButton('Close', loginDlg.hide, loginDlg);
		loginDlg.addButton('Login', $P.login, loginDlg);
        },
        ...
}

This JavaScript file also has some other event listeners where I simply show or hide the dialogs as follow:

Code:

loginDlg.show();
logoutDlg.show();

If you really want to see it live, I would need a little extra time to upload these files. For now, I think it's obvious that I'd like to have a login dialog and logout dialog box. I have 2 links on the HTML, 2 event listeners listening, where each evt listener call the appropriate show() method.

Please let mw know if I would need to upload. Thanks

**Animal** · 8 Dec 2006 12:57 PM

Go into Firebug, and inspect the DOM.

There's a problem with your HTML markup and the logout-dlg is ending up inside the login-dlg

**Animal** · 8 Dec 2006 12:58 PM

Try this as your login dialog:

Code:

<div id="login-dlg" style="visibility:hidden;overflow:hidden;position:absolute;top:0px;">
   <div class="ydlg-hd">Guest Login</div>
   <div class="ydlg-bd">
      <div id="logonForm" class="form">
      <form id="signonForm" method="POST">
      <fieldset>
         <legend>Guest Login</legend>
         <p id="login-title" class="message"></p>         
         <br class="clearBoth" />
         <label class="fieldLabel" for="guest_id">Guest Id:</label>
         <input type="text" style="float:left" id="id" name="id" value=""/>
         <br class="clearBoth" />
         <br class="clearBoth" />
       <label class="fieldLabel" for="password">Password:</label>
         <input type="password" style="float:left" id="password" name="password" value=""/>         
      </fieldset>      
      </form>    
      </div>        
   </div>   
</div>

**tryanDLS** · 8 Dec 2006 1:00 PM

If you're going to use forms inside your dialog, this isn't going to work b/c the dialog creation process will move the dialog elements outside your form tags. Use Firebug or WebDeveloper to see the really HTML/Dom structure when the dialog is created.

To avoid this, you need to use the form element's id as the id for the Dialog constructor. There are samples of this in the forum.

**khnle** · 8 Dec 2006 1:04 PM

Animal, you're the man, .. I mean animal. Just kidding, but the markup did get screwed-up. Thanks to tryanDLS too.

**Animal** · 8 Dec 2006 1:04 PM

I haven't seen that problem. I'm looking at that code in Firebug's DOM inspector now, and the form element is right there inside the ydlg-bd element.

**khnle** · 8 Dec 2006 1:12 PM

Thanks Animal. I will need to get Firebug. Also thanks alanwilliamson. BTW, Alan, were you also heavily involved in the Thinlet project the the past? I thought I recognize your name from a while back...

Multiple BasicDialog instances on same page

Thread Tools

Search Thread

Display

Hybrid View

Multiple BasicDialog instances on same page

Multiple BasicDialog instances on same page

Similar Threads

Please Help...Multiple grid on the same page

Problem with column width with multiple grids on a page

Column width problem when multiple grid on same page

Multiple Grids on a Page, Column Adjust Problem?

Single or multiple page layout?