addin dilog to panel

EasyUI Forum

May 24, 2024, 05:33:25 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > addin dilog to panel

Pages: [1]

« previous next »

Author

Topic: addin dilog to panel (Read 14634 times)

devnull

Sr. Member

Posts: 431

addin dilog to panel

« 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({})


	Logged

-- Licensed User --

lusabo

Newbie

Posts: 8

Re: addin dilog to panel

« Reply #1 on: March 13, 2012, 07:39:15 AM »

Try this way:

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


	Logged

devnull

Sr. Member

Posts: 431

Re: addin dilog to panel

« Reply #2 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>


	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: addin dilog to panel

« Reply #3 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.


	Logged

Pages: [1]

« previous next »