removing hidden content panels

EasyUI Forum

May 03, 2024, 10:29:53 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > removing hidden content panels

Pages: [1]

« previous next »

Author

Topic: removing hidden content panels (Read 18349 times)

devnull

Sr. Member

Posts: 431

removing hidden content panels

« on: May 31, 2014, 11:41:00 PM »

I am loading my content into a content div, that works fine.

The problem is easyui adds all of the hidden panels and elements outside of my content panel, and when I load new content, the elements from the previous page are interfering with the loaded page.

How can I either force easyui to add it's hidden elements to the element that is loaded with content, or remove these hidden elements when a new page is loaded ?

Thanks


	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: removing hidden content panels

« Reply #1 on: June 01, 2014, 08:14:36 AM »

You may need to provide an example to demonstrate your issue.


	Logged

devnull

Sr. Member

Posts: 431

Re: removing hidden content panels

« Reply #2 on: June 02, 2014, 05:37:24 AM »

all content is loaded via ajax into <centre>, easyu ui will then append it's hidden elements required for <centre> to the <body> tag rather than appending it to the <centre> element.

When new content is loaded into <centre> the hidden objects are not removed and interfere with new content that is loaded into <centre>

is it possible to specify the target of these hidden elements so that they are appended to the <centre> element instead of appending to the body.

Code:

<body>
-<north>
-<west>
-<centre>
--<content loaded via ajax>
<easui appended panel combo 1>
<easui appended panel combo 2>
<easui appended panel combo 3>
<easui appended manu >


	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: removing hidden content panels

« Reply #3 on: June 02, 2014, 07:49:43 AM »

To load a content page into a panel, please use 'refresh' method instead. All the components inside the panel and its corresponding panels will be removed before loading a new content page.


	Logged

devnull

Sr. Member

Posts: 431

Re: removing hidden content panels

« Reply #4 on: June 06, 2014, 05:13:42 AM »

Hi;

Thanks, but I am already using the refresh method to load the panel, as in the initial post all of easyui's hidden panels and elements get added to the BODY tag and not to the content div:

Code:

var oc = {me:$(this), cp:$('#content')};
oc.url = '/?_func=report&_page=xxx';
oc.cp.panel('refresh',oc.url);

when using the above code, the following hidden combo is appended to the BODY tag, not the CONTENT tag:

Code:

<div class="menu" style="width: 114px; height: 66px; display: none;"><div class="menu-line" style="height: 70px;"></div><div data-options="iconCls:'icon-add'" onclick="tradd('bas','undefined')" class="menu-item" style="height: 20px;"><div class="menu-text"></div><div class="menu-icon icon-add"></div></div><div data-options="iconCls:'icon-add'" onclick="tradd('bas','undefined')" class="menu-item" style="height: 20px;"><div class="menu-text"></div><div class="menu-icon icon-add"></div></div><div data-options="iconCls:'icon-add'" onclick="tradd('bas','undefined')" class="menu-item" style="height: 20px;"><div class="menu-text"></div><div class="menu-icon icon-add"></div></div></div>


	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: removing hidden content panels

« Reply #5 on: June 06, 2014, 08:48:13 AM »

Please try the attached example 'test.zip'.


	Logged

devnull

Sr. Member

Posts: 431

Re: removing hidden content panels

« Reply #6 on: June 06, 2014, 05:48:46 PM »

Thanks for helping.

I tested your example, it also adds the hidden content to the body and not to the content element.

http://postimg.org/image/qd76h5hrn/

when you have a small page with a couple of controls, the hidden elements get removed from the body before the next page loads, however if the pages you are loading contain a lot of ajax-loaded comboboxes, trees and menus, then the old elements do not get removed before the new page starts to load it's elements.

If the new page happens to have a element id the same as the old page then strange things happen, such as the previous screen's controls override the new screen controls.

I believe that the design is such that all hidden elements are appended to the <body> tag, is it possible to add the ability to override the target element with another element ?

Thanks


« Last Edit: June 06, 2014, 05:59:22 PM by devnull »	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: removing hidden content panels

« Reply #7 on: June 07, 2014, 06:10:02 AM »

Some components such as combobox contain an input box and the drop-down panel. The drop-down panel is appended to <body>. When call 'refresh' method to load a page that contains combobox, the drop-down panel is appended to <body> too. This drop-down panel will be auto removed before 'refresh' a new page. So it does not matter anymore.


	Logged

devnull

Sr. Member

Posts: 431

Re: removing hidden content panels

« Reply #8 on: June 07, 2014, 07:29:29 AM »

when you have a simple page with a couple of controls, the hidden elements get removed correctly from the body before the next page loads.

However if the pages you are loading contain a lot of ajax-loaded comboboxes, trees and menus, then the old elements do not get removed before the new page starts to load it's elements.

I have a few content pages with 2 or 3 ajax trees with a few hundred nodes and maybe 10 ajax combo boxes. When I attempt to load these pages, the old elements are not removed probably due to the time it takes for the new page to load all of the ajax requests.

You would not see this problem unless your page loads a lot of ajax elements.

How can I ensure that hidden elements are added to the target panel and not to the body, then if necessary I can call content.empty() to remove these elements.

The examples you are providing are very simple pages, my page is very complex with a lot of ajax-loaded controls and the old elements are not removed before the new page starts to load.


	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: removing hidden content panels

« Reply #9 on: June 07, 2014, 08:36:22 AM »

You can not use jQuery's native method 'load' or 'empty' methods since they don't known what components are appended to <body>. You have to use the 'refresh' method instead. Of course, extending a method to empty the panel may be a possible solution. Please refer to the code below.

Code:

$.extend($.fn.panel.methods,{
	clear: function(jq){
		return jq.each(function(){
			var t = $(this);
			t.find('.combo-f').each(function(){
				$(this).combo('destroy');
			});
			t.find('.m-btn').each(function(){
				$(this).menubutton('destroy');
			});
			t.find('.s-btn').each(function(){
				$(this).splitbutton('destroy');
			});
			t.find('.tooltip-f').each(function(){
				$(this).tooltip('destroy');
			});
			t.children('div').each(function(){
				$(this)._fit(false);
			});
			t.empty();
		})
	}
})

Calling 'clear' method of panel will clean the panel content, including those relative components.

Code:

$('#p').panel('clear');


	Logged

Pages: [1]

« previous next »