Print Page - addin dilog to panel

Title: addin dilog to panel
Post by: devnull on March 13, 2012, 03:42:46 AM

Hi;

I need to dynamically add elements to a tab and are having problems with the dialog panel.

I want to add them to the tab as there are many tabs and when a tab is closed I want to also destroy the dialog, and it seems the most logical way to do it.

First I check if the tab exists and add it if it doesnt.

Then I append the dialog <div> container which is loaded correctly to the tab.

but as soon as I call the dialog, the div container is removed from the tab and appended to the body.

How can I dynamically add to the tab ??

Code:

// if NOT tab then add it.
var exists = $('#ttab').tabs('getTab',tabID);
if(!exists) $('#ttab').tabs('add',{title:tabID});

// Append the dialog Container
$(tab).append($('<div>').attr({'id': 'epan'}));

// Init the dialog
$('#epan').dialog({})

Title: Re: addin dilog to panel
Post by: lusabo on March 13, 2012, 07:39:15 AM

Try this way:

$("#blah").html([your html data]).dialog();

Title: Re: addin dilog to panel
Post by: devnull on March 14, 2012, 11:39:31 PM

Hi;

Thanks so much for helping, but the problem is not that I can't add a <div> container to a tab, but the fact that the dialog script appears to remove itself from the tab, and append itself to the <body>.

Here's an example, the div is added successfully to the tab, and as soon as the dialog() function is executed, the dialog is created and append to the <body> and not to Tab1.

Code:

<script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script>
	
$(document).ready(function(){				
	var tab = $('#ttab').tabs('getTab','Tab1');
	var div = $('<div>').attr({'id':'Main_epan'});
	$(tab).append(div);
	$('#Main_epan').dialog({content:'Test Text'})
})
	
	</script>

<body class="easyui-layout">
	
	<!-- Main Body -->
	<div region="center" title="Main Title" style="overflow:hidden;">
		<div class="easyui-tabs" fit="true" border="false" id="ttab">
			<div title="Tab1" style="padding:20px;overflow:hidden;"> </div>
			
		</div>		
	</div>
	

</body>

Title: Re: addin dilog to panel
Post by: stworthy on March 15, 2012, 06:23:57 PM

Why add dialog in a tab panel? Add 'inline' property to true to prevent from moving dialog to <body>. If you want to display some information in tab panel, maybe the panel is more fit for you.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on March 13, 2012, 03:42:46 AM