infinite body growth due to orphaned elements

EasyUI Forum

May 21, 2024, 09:02:35 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > infinite body growth due to orphaned elements

Pages: [1]

« previous next »

Author

Topic: infinite body growth due to orphaned elements (Read 9249 times)

devnull

Sr. Member

Posts: 431

infinite body growth due to orphaned elements

« on: December 06, 2016, 04:13:47 AM »

My application loads pages into a layout dynamically.

When the page initially loads into the browser, it sets up the application menus and other controls that are common to the application.

A page is then loaded into a content panel and all it's controls added and rendered, in easyui this results in divs being appended to the body for all the elements rendered.

Problem is, when I load another page (without refreshing the browser) using the built in common menus, all of the combos and panels and other elements don't get removed from the body, meaning that the page keeps on and on growing in size with every page that is loaded and it gets slower and slower.

So what is the solution to this, is it possible to make eui append all panels etc etc to a specific div rather than to the body ?

If this is possible then in my function that loads a new page, I can .remove() all of the elements that were loaded by the previous page, this will solve the problem.

So, how can I get easyui to append it's hidden panels to a specific div rather than directly to the body ?


« Last Edit: December 06, 2016, 06:21:32 AM by devnull »	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: infinite body growth due to orphaned elements

« Reply #1 on: December 06, 2016, 07:43:57 AM »

The 'clear' method can be called to clear the panel's content that contains all the combo,menu,tooltip,etc. Please try to call this method before loading other contents.

Code:

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


	Logged

devnull

Sr. Member

Posts: 431

Re: infinite body growth due to orphaned elements

« Reply #2 on: December 06, 2016, 08:00:09 AM »

Thanks but unfortunately that does not work.

The page still grows and the number of elements attached to the body keeps increasing with every new page load.

Loading the same page also increases the page size and number of elements attached to the body.

How can I define a element other than the body to attach elements so that I can then remove this element when I load a new page.

Many Thanks

Code:

  $('#content').panel({
    onBeforeLoad: function(par){
      $(this).panel('clear');
      console.log($('body > div').length));
      var size = ($('html').html().length / 1024).toFixed(2);
      console.log('page-size:'+size+'kb');
  }
  })


« Last Edit: December 06, 2016, 08:18:53 AM by devnull »	Logged

-- Licensed User --

devnull

Sr. Member

Posts: 431

Re: infinite body growth due to orphaned elements

« Reply #3 on: December 06, 2016, 04:53:22 PM »

I took screen shots of the body content but just realised that I cannot attach them to my post.

Code:

      if(_bdivs) cl('initial:'+_bdivs.length);
      cl('before-clear:'+$('body > div').length);
      $('#content').panel('clear');
      cl('after-clear:'+$('body > div').length);

So here is the logging info from developer tools console:

initial:27
main.min.js:2 before-clear:46
main.min.js:2 after-clear:44

Initial is the initial body length before anything is loaded into the content panel.

before-clear is the body length before clearing the content panel and after-clear is after clearing.

So in this small page, only 2 elements were cleared from the body and there are 17 orphaned elements.


	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: infinite body growth due to orphaned elements

« Reply #4 on: December 06, 2016, 06:43:56 PM »

Please look at this example http://code.reloado.com/uqinek3/edit#preview. The content in the panel can be cleared after calling 'clear' method.


	Logged

devnull

Sr. Member

Posts: 431

Re: infinite body growth due to orphaned elements

« Reply #5 on: December 06, 2016, 06:53:32 PM »

Trusut me, I am not imagining or faking this, the situation is that my pages are growing in size every time new content is loaded.

With simple screens with a few elements it does indeed clear, but if you have screens that have 10 tabs and 20 combos and 2 datagrids and some of these are defined in HTML and some are added programatically to the DOM then it does not clear all elements.

Is it possible for me to extend easyui so that I can specify a folder to append to other than the body ?

Then I can .empty() this folder whenever I load a new page and the problem is solved.

What I would like to do is to load the main structure elements into the body as normal, and then when calling the panel load, include a element reference that the new content will be appended to.

I think this is managed by the jquery.parser.js ??


« Last Edit: December 06, 2016, 06:58:56 PM by devnull »	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: infinite body growth due to orphaned elements

« Reply #6 on: December 06, 2016, 08:37:40 PM »

The elements that loaded into a panel are inline elements and combo elements. The inline elements can be cleared directly. The combo elements are combined with a drop-down panel that displaying over all the elements, so this drop-down panel should be moved to <body>. Every combo elements have a 'destroy' method that can be called to destroy it completely.

Calling the 'clear' method will clear all the inline elements and combo elements. You may need to check your code to see what elements can't be cleared and then custom or override the 'clear' method to improve it.


	Logged

devnull

Sr. Member

Posts: 431

Re: infinite body growth due to orphaned elements

« Reply #7 on: December 07, 2016, 04:19:57 AM »

OK, spent pretty much the whole day today trying to track down the cause of this and have made some progress.

elements such as inputs etc DO get removed correctly.

However if you add for example a window to the dynamically loaded panel, then this window does not get removed with the panel('clear') and remains attached to the body forever.

In addition, dialogs, menus etc with the same id get appended to the body with each reload which should not happen as ids are supposed to be unique in the dom ?!

This means that if I reload the same page 10 times I will end up with 10 dialogs all with the same ID attribute.

There may be other components that also cause this, but window is the first one I have found.

I also think (but not proved yet) that the following are not removed with panel('clear');

1. Panels
2.Windows
3. Dialogs
4. Menus

http://code.reloado.com/uqinek3/3/edit


« Last Edit: December 07, 2016, 06:21:06 AM by devnull »	Logged

-- Licensed User --

stworthy

Administrator
Hero Member

Posts: 3581

Re: infinite body growth due to orphaned elements

« Reply #8 on: December 07, 2016, 05:05:49 PM »

The 'inline' property can be set to make the window stays on its original position or moves to <body>. By default the 'inline' is set to false.

If the 'inline' is false, you should add a special class to the window and then destroy it when calling the 'clear' method. Please look at this example http://code.reloado.com/uqinek3/4/edit.

If the 'inline' is true, the 'clear' method can clear the window completely. Please look at this example http://code.reloado.com/uqinek3/5/edit


	Logged

Pages: [1]

« previous next »